Accueil du site > Documentation > @font-face

@font-face

Une lutte acharnée contre la misère typographique

mardi 10 mars 2009, par Baroug

Les possibilités typographiques du design sur Internet sont globalement misérables. Quelques polices système utilisables, et c’est tout : tout bon manuel dira qu’en utiliser d’autres, c’est mal, et que de toute façon, ça ne marche pas. C’est vrai.

Les solutions du type images typographiques fonctionnent globalement bien — mais elles génèrent, comme leur nom l’indique, des images, et ne sont donc pas appropriées pour le texte, en-dehors d’un peu de titraille ou des menus.

Face à cette misère policière existe une issue : @font-face. Cette propriété des CSS permet, une fois qu’on a placé des polices de caractères dans un répertoire adéquat de son serveur, d’utiliser celles-ci sans que le visiteur n’ait à les installer sur son ordinateur. Il faut néanmoins utiliser un navigateur compatible — un Safari récent et bientôt, Firefox [1] —, qui téléchargera et interprétera les fontes.

Cette technique a elle aussi des limites : impossible de l’utiliser avec des polices commerciales, puisque les fontes placées sur le serveur pour @font-face seront librement téléchargeables. Et même les polices « gratuites » ne se laissent pas toutes distribuer ainsi. Il n’empêche : ça marche bien, et c’est une joie de voir autre chose que de l’Helvetica-Georgia-Verdana-Lucida sur une page web.

How to

Il faut donc d’abord installer les fontes sur notre gentil serveur. A priori, dans un répertoire /polices, par exemple. Cela fait, il faut déclarer chacune d’entre elle comme une classe CSS, toujours la même @font-face. Par exemple, sur ce site est installée la police Coolvetica, du prolifique Ray Larabie. (On l’utilise pour les titres et quelques autres trucs). Déclarons-la gaiement :

@font-face {                        
 font-family:coolvetica;
 src:url(peaulisses/coolvetica.ttf);
 format("truetype");
}

On indique un nom, qu’on utilisera pour la nommer dans les classes et id comme n’importe quelle autre police, ici la Coolvetica. On précise ou elle est située. Et éventuellement, le format — apparemment ce n’est pas indispensable mais bon, hein.

Si l’on veut utiliser plusieurs polices de cette manière, chacune doit être déclarée dans une déclaration @font-face indépendante. Ainsi :

@font-face {
 font-family:coolvetica;
 src:url(peaulisses/coolvetica.ttf);
 format("truetype");
}
@font-face {
 font-family:larabiefont;
 src:url(peaulisses/larabiefont.otf);
 format("opentype");
}

Pof.

« Le gras, c’est la vie »

La police ainsi choisie peut n’avoir qu’une seule graisse. Dans ce cas, s’il s’agit par exemple d’un gras, et que le gentil internaute venant butiner sur notre belle page n’utilise pas un navigateur compatible avec @font-face, la police qu’il verra à la place ne sera pas en gras, et toute l’harmonie de notre belle page sera menacée. Car si l’on donne l’attribut font-weight: bold; à la class ou l’id où se trouve notre police, elle sera déformée par un immonde gras informatique. Ce qui est totalement proscrit. C’est mal. Bouh.

Heureusement, une solution existe : déclarer dans le @font-face de la police une graisse. Voilà donc le @font-face complet déclarant la sympathique Coolvetica :

@font-face {
 font-family:coolvetica;
 src:url(peaulisses/coolvetica.ttf);
 format("truetype");
 font-weight: bold;
}

Une bien meilleure dégradation, pour employer un terme associé au javascript.

Hélas, l’astuce ne semble pas fonctionner avec d’autres propriétés comme letter-spacing. Peut-être dans une future évolution de @font-face ?

Et c’est tout ! Comme je l’ai dit plus haut, pour l’utiliser ensuite, on la place normalement, comme d’habitude, dans une liste de polices possible, du genre {font-family: coolvetica, helvetica, arial, sans-serif; } . Chose merveilleuse, de cette façon, le sympathique visiteur qui surfe avec un navigateur qui ne supporte pas encore @font-face verra la Lucida à la place de la Coolvetica. Tout marchera dont malgré tout. En moins joli.

Maintenant, il faudrait que de généreux typographes aient conscience de la nécessité de créer de nouvelles polices libres, pour le bien esthétique commun. Go go go !

Portfolio

La page d'accueil de ce site sous Safari

4 Messages de forum

  • @font-face Le 13 mars 2009 à 19:05 , par tetue

    Ça me rappelle une histoire drôle avec un singe poursuivi par les gendarmes, mais je sais plus laquelle...

  • @font-face Le 26 août 2009 à 19:01 , par mng

    oui c’est vrai à moi aussi .. vous avez raison ça me rappelle très bien l’histoire du singe ,ah oui je vois bien ...poursuivi justement oui mais par qui exactement ..!?

  • @font-face Le 16 septembre 2009 à 07:55 , par Fil
  • @font-face Le 16 septembre 2009 à 10:19 , par baroug

    Rien ne sera fait, de ma part, pour aider IE à quoi que ce soit. Qu’il meure dans d’atroces souffrances.