Étiquette : @font-face

Héberger et utiliser une police personnalisée

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 ! 😉