@font-face, polices personnalisées pour le Web

Utiliser vos propres fonts avec @font-face

Votre choix ne se limite pas pas au catalogue Google Web Fonts proposé par Google, l’utilisation de @font-face permet d’utiliser presque n’importe quelle typo hébergée sur votre serveur, (Assurez-vous d’utiliser une police libre de droits, ou dont vous avez les droits. (Limitation légale et non technique).

©paulineghiazza.fr

Mise en place de @font-face sur votre site

L’utilisation basique de @font-face est la suivante, pour une police TrueType « matypo.ttf » stockée dans le répertoire relatif « fonts » : @font-face { font-family: matypo ; src: url( fonts/matypo.ttf ) format("truetype"); }

L’application du style s’utilise comme avec les polices standards :

.p { font-family: matypo, verdana, helvetica, sans-serif; }

Ce style typographique fonctionne avec la quasi totalité des navigateurs à l’exception notable d’Internet Explorer (IE) qui ne sait pas gérer les polices TrueType !

Pour contraindre ce problème, il suffit de convertir la police au format EOT (Embedded Open Type) pour que votre police s’affiche correctement.

Pour ce faire tilisez un outil en ligne comme tel que Squirrel @font-face. Cet outil très paratique va non seulement convertir la police dans tous les formats utilisables, et également générer le code css @font-face correspondant. Il ne vous reste ensuite qu’à personnaliserle chemin de stockage de la police pour que ça fonctionne.
Voici un exemple :

@font-face { font-family: 'matypo'; src: url('matypo-webfont.eot'); src: url('matypo-webfont.eot?iefix') format('eot'), url('matypo-webfont.woff') format('woff'), url('matypo-webfont.ttf') format('truetype'), url('matypo-webfont.svg#webfontaPl2NyqY') format('svg'); font-weight: normal; font-style: normal; }

Mémo sur@font-face Fonts

N’hésiter pas à télécharger le "Web Safe Fonts Cheat Sheet v.3" que vous pouvez consulter ici.

Vos pages sont maintenant personnalisées avec de jolies polices et ne perdent rien de leur optimisation pour le Web ! Merci @font-face !