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 :

1. Télécharger votre police, sur des sites comme Dafont par exemple.
2. 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.
3. 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
4. Cliquez sur « Add fonts », attendez la fin de son téléchargement et téléchargez votre kit en cliquant sur « Download your kit ».
5. Décompressez l’archive.
6. Vous pourrez ensuite créer un dossier « polices » dans lequel vous mettrez les 4 fichiers cités plus haut.
7. 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 ! 😉