@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).

font_face2.jpg

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');

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!

En complément lire l’article Google Web Fonts des polices pour le Web.

0 réponses

Laisser un commentaire

Rejoindre la discussion?
N’hésitez pas à contribuer !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.