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

Votre choix typographique 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 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 qui est hébergée sur votre serveur. Assurez-vous tout de même d’utiliser une police libre de droits (limitation légale et non technique).

Mise en place de @font-face sur votre site

L’utilisation basique de @font-face est la suivante pour une police TrueType « typo.ttf » stockée dans le répertoire relatif «fonts» :

Déclarer la police @font-face dans la feuille de style CSS

@font-face font-family: matypo ; src: url( fonts/typo.ttf ) format("truetype");

L’application du style s’utilise comme avec les polices standards dans la feuille de style CSS:

.p font-family: typo, 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) afin que votre police s’affiche correctement.

Pour ce faire utilisez un outil en ligne comme tel que Squirrel @font-face. Cet outil très pratique 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’à personnaliser le chemin de stockage de la police pour que cela fonctionne.

Voici un exemple :

@font-face font-family: 'typo'; src: url('typo.eot'); src: url('typot.eot?iefix') format('eot'), url(typo.woff') format('woff'), url('typo.ttf') format('truetype'), url('typo.svg#webfontaPl2NyqY') format('svg');