Qui n’a jamais révé de pouvoir installer la police de son choix sur son site internet, juste histoire de sortir des éternels Arial, Trebuchet MS ou encore Georgia ?
Styler vos titres et vos contenus avec une typographie sortant de l’ordinaire sans utiliser d’images (et donc améliorer le référencement de votre site), c’est possible grâce à la propriété @font-face !
Voici un petit tutoriel simplifié de la marche à suivre :
- Télécharger votre police, sur des sites comme Dafont par exemple.
- Vous allez avoir besoin de convertir ce fichier (généralement vous le téléchargerez au format .ttf) en 3 autres extensions, dans le but d’obtenir 4 fichiers de police aux formats .ttf, .eot, .svg et .woff.
- Ceci dans une optique de compatibilité avec les différents navigateurs et systèmes d’exploitation. Pour cela, rendez-vous sur ce site : http://www.fontsquirrel.com/fontface/generator
- Cliquez sur « Add fonts », attendez la fin de son téléchargement et téléchargez votre kit en cliquant sur « Download your kit ».
- Décompressez l’archive.
- Vous pourrez ensuite créer un dossier « polices » dans lequel vous mettrez les 4 fichiers cités plus haut.
- Il ne vous reste plus qu’à ajouter vos règles CSS, que vous trouverez dans l’archive, dans le fichier « stylesheet.css ». Vous copierez donc ce code :
@font-face { font-family: 'MaPolice'; src: url('polices/MaPolice.eot'); src: url('polices/MaPolice.eot?#iefix') format('embedded-opentype'), url('polices/MaPolice.woff') format('woff'), url('polices/MaPolicet.ttf') format('truetype'), url('polices/MaPolice.svg#MaPoliceMaPolice') format('svg'); font-weight: normal; font-style: normal; }
et appellez votre police de la même façon que toutes les autres, par exemple :
h2 { font-family : "MaPolice", Arial, sans-serif; }
N’omettez d’ailleurs pas de mettre des polices alternatives, au cas où ;).
Amusez-vous bien ! 😉
J’apprécie l’article! Je viens de mettre en oeuvre vos instructions et ça fonctionne à merveille, alors je vous ajoute dans mes favoris et vous remercie de tout coeur!!