Édition Nº2 du 22 mai 2012 Retour au sommaire

@font-face : astuces et outils pour bien l’utiliser

@font-face, c’est chouette, et tout le monde en parle… mais mal utilisée, elle peut amener autant de soucis que d’avantages.
Conseils et astuces pratiques pour une utilisation l’esprit tranquille.

Conducteur


Goulven Champenois

Arrêts prévus :

La déclaration CSS @font-face permet d’utiliser n’importe quelle police de caractères sur le web. Mais ce qui peut paraître un changement mineur dans l’apparence d’un site peut le rendre illisible pour une partie de l’audience, alourdir le poids des pages au-delà du raisonnable, voire vous coûter un procès !

Voici donc une liste de conseils, astuces et techniques pour utiliser cette possibilité sans risques et dans les règles de l’art, ainsi qu’un aperçu des utilisations alternatives de cette fonctionnalité.

Choisir une police

Les polices apportent une touche de personnalité au texte, mais un accent peut être perçu comme charmant ou élégant, ou irritant voire même distrayant… Choisissez la police adaptée à la personnalité souhaitée pour le site.

Par ailleurs, les polices systèmes sont conçues pour une lisibilité optimale à l’écran ; ce n’est pas forcément le cas des polices plus audacieuses ou destinées à l’impression. Sur un titre gras et de grande taille cela ne posera pas problème, mais n’utilisez une police non standard pour le corps de texte qu’avec beaucoup de précautions.

À titre personnel, je vous recommande le “Guide de choix typographique”, publié aux Ateliers Perrousseaux : ce livre détaille l’histoire, les particularités et les usages typiques d’une soixantaine de polices classiques.

Licence

L’un des freins à l’explosion des polices web a été la peur du piratage pour les fonderies. Heureusement, de plus en plus de polices sont maintenant gratuites, gratuites pour un usage non-commercial, ou proposées avec une licence web… Mais pas toutes !

Vérifiez donc dès le début du projet que la ou les polices retenues disposent d’une licence autorisant son usage sur le web, et que vous avez acquis cette licence (et pas seulement celle pour l’impression).

Pour certaines polices, la seule solution consiste à passer par un service en ligne. Mais chaque service a des exclusivités sur les polices proposées, et certaines polices ne sont tout bonnement pas proposées pour le web. Bon courage pour trouver le service hébergeant la police du projet… J’ai listé les services hébergeant les polices étudiées dans le Guide pratique de choix typographique dans le tableau suivant.

Aperçu du tableau des services hébergeant les polices les plus classiques
Aperçu du tableau (télécharger) indiquant quels services hébergent les polices les plus classiques

Polices préinstallées

Si la police choisie est inclue par le système d’exploitation ou par une suite logicielle installée sur le poste, et que vous acceptez que vos visiteurs ne voient pas tous le site avec la même police, alors une option intéressante s’ouvre à vous.

Vous pouvez tout simplement indiquer le nom d’une de ces polices non standards dans la déclaration font-family, suivi bien sûr d’une ou plusieurs polices web-safe (celles qui sont disponibles quasiment partout), et en finissant comme toujours par un type de police (serif ou sans-serif le plus souvent). Si le visiteur possède cette police elle sera utilisée sans que vous ne vous embarrassiez avec @font-face, sans que vous n’ayez besoin d’acheter de licence, et sans téléchargement de fichier supplémentaire pour votre visiteur. Jackpot !

Oui, enfin, pas si simple. Il faut trouver le nom de police tel qu’il est utilisé sur les ordinateurs de vos visiteurs, et il existe des centaines de variations pour une police aussi classique qu’Helvetica. En pratique, essayez de lister le nom tel quel (“Helvetica Neue”) suivi par le nom du fichier Postscript (“HelveticaNeue”). Vous trouverez ce dernier en utilisant Font Book (livré avec Mac OS, capture ci-après) et dans le dossier Fonts sur Windows (en vue détail).

Capture montrant le nom Postscript dans Font Book
Capture montrant le nom Postscript dans Font Book

Vous devrez néanmoins tester votre site avec les polices de substitution pour éviter que l’affichage ne diffère trop. Surveillez en priorité les éléments textuels dont les dimensions influencent le positionnement d’autres éléments. Exemples : le nom du site qui vient toucher un formulaire de recherche positionné en absolu, le titre d’un billet qui passe sur 2 lignes, du texte placé sur un fond de dimensions fixes… Le bookmarklet ffffallback permet de superposer l’affichage des 2 polices pour simplifier la comparaison.

Capture écran du bookmarklet ffffallback en action sur le site dédié
Capture écran du bookmarklet ffffallback en action sur le site dédié

Lissage

L’affichage d’une police dépend du système d’exploitation et du logiciel utilisé. Photoshop en particulier lisse le texte très différemment des navigateurs, et une police tout à fait normale sur votre écran peut faire pleurer vos visiteurs… Ne vous fiez pas aux maquettes, testez toujours le rendu de votre police dans plusieurs navigateurs et systèmes d’exploitation.

Comparaison de Myriad Pro sur Mac et Windows via Web Font Specimen
Comparaison de Myriad Pro sur Mac et Windows via Web Font Specimen (Voir la source)

Pour éviter des déconvenues, désactivez le lissage et les effets de texte (ligatures, césure intelligente) de Photoshop avant d’envoyer les propositions, pour que le site final ressemble le plus possible aux maquettes validées par le client.

Capture écran des réglages à appliquer dans Photoshop
Capture écran des réglages à appliquer dans Photoshop

1… 2… 3… 22 v’là la police !

Quand un site utilise une police particulière, il peut se produire ce que les anglophones appellent un FOUT, un “Flash Of Unstyled Text”. Kézako ? Petit jeu de rôle : que feriez-vous si vous étiez un navigateur ayant reçu le HTML et les CSS mais pas encore les fichiers de police ?

  1. J’affiche la page avec les polices système. Le visiteur voit quelque chose dès que possible, mais il faut recalculer la mise en page à l’arrivée des polices ce qui peut faire sauter l’affichage.
  2. J’attends d’avoir tout reçu. Suivant le poids des polices et la vitesse du réseau (et en priant pour que tous les fichiers soient disponibles), le visiteur risque de regarder une page blanche pendant un long moment.
  3. J’attends quelques instants, puis je fais avec ce qui est arrivé d’ici là et je recalcule la mise en page à mesure que les polices arrivent.

Aucune solution n’est parfaite, mais les navigateurs s’orientent vers la troisième car la vitesse d’affichage d’un site est plus importante que son apparence initiale (quoi qu’en disent les graphistes, l’impact marketing des performances est indubitable).

Le WebFont loader (disponible sur Typekit et Google web fonts) permet d’avoir des règles CSS qui ne s’appliquent que quand les polices sont chargées, ce qui peut être utile quand les polices de substitution ont des métriques très différentes, ou pour remplacer un texte par une image si vous y tenez. A vous de voir s’il est indispensable de pouvoir contrôler cette situation en CSS, et si un fichier JavaScript de plus n’alourdit pas le chargement et l’exécution de la page pour rien.

Poids des polices

Un fichier de police pèse lourd, très lourd. D’une police à l’autre, on peut aller jusqu’à des centaines de ko pour un fichier ! Et rappelez-vous que chaque corps (gras, italique, gras et italique, condensé, etc.) représente un fichier distinct.

Poids des polices sur une page du site Smashing Magazine
Poids des polices sur une page du site Smashing Magazine

Cette capture montre que les polices utilisées sur Smashing Magazine ajoutent 200ko au poids total de la page pour un navigateur supportant le format optimisé WOFF, et nécessitent 5 requêtes HTTP distinctes.

Une optimisation possible pour les sites en anglais consiste à supprimer les caractères accentués, mais c’est malheureusement impossible en français. Vous pouvez en revanche alléger vos fichiers en éliminant les accents qui ne risquent pas d’être utilisés sur votre site (les accents exotiques des langues slaves par exemple) grâce au site http://www.subsetter.com/ —voire retirer les ligatures qui sont encore très peu supportées par les navigateurs, avec l’accord du graphiste.

Aperçu de l’outil Subsetter de fontfont
Aperçu de l’outil Subsetter de fontfont

Pour éviter que le navigateur ne re-télécharge une police à chaque chargement de page, et même lui éviter de vérifier si sa version en cache est encore à jour, voici quelques règles pour .htaccess indiquant aux navigateurs (et proxies intermédiaires) une durée de validité des fichiers de police.

1
2
3
4
5
6
ExpiresActive on
# Configuration des durees de validite des fichiers de police
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/truetype             "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"

Utilisation

Vous êtes encore là ? Alors accrochez-vous, ça devient tordu…

Pour assigner une police en CSS, il faut passer par font-family (ou la syntaxe raccourcie font). N’oubliez pas d’inclure une police standard et un type (serif ou sans-serif) en fin de déclaration pour que le site s’affiche lisiblement en attendant que la police soit téléchargée.

1
2
3
h1, h2 {
    font-family: MyWebFont, "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
}

Les formats normal, gras, italique, et gras italique sont autant de fichiers séparés, vous devrez donc indiquer l’adresse de chaque combinaison utilisée. Pour simplifier l’utilisation de cette police dans la CSS, déclarez le même nom de police et indiquez graisse et style dans chaque déclaration @font-face.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@font-face {
    font-family: 'MyWebFont’;
    src: url('webfont.eot’);
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
    url('webfont.woff') format('woff'),
    url('webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
    font-family: 'MyWebFont’;
    src: url('webfont_bold.eot’);
    src: url('webfont_bold.eot?#iefix') format('embedded-opentype'),
        url('webfont_bold.woff') format('woff'),
        url('webfont_bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

Outre qu’il est plus simple de retenir un seul nom de police, le navigateur ne simulera pas le gras et l’italique, et la police de substitution (si elle est utilisée) s’affichera avec la graisse et le style demandé.

Source : Simplifiez vos CSS en déclarant graisse et style dans @font-face, de Roger Johansson

Je parlais de polices préinstallées un peu plus tôt, vous pouvez dire au navigateur qu’il ne doit télécharger la police que s’il ne la trouve pas sur le poste. Pour cela, ajoutez local('nom-local.extension’) juste avant url(). Ici encore, il faut utiliser le nom complet et le nom Postscript.

Certaines polices sont proposées par différentes fonderies sous le même nom mais avec des mesures différentes. C’est rare, mais suffisamment angoissant pour que certains cherchent à s’en prémunir. Pour cela, il suffit d’indiquer au navigateur un fichier local avec un nom impossible (un smiley par exemple) : ne trouvant aucun fichier de ce nom, il se rabattra forcément sur le fichier à télécharger. Dans ces cas-là, la syntaxe sera :

1
2
3
4
5
6
7
8
9
10
@font-face {
    font-family: 'MyWebFont’;
    src: url('webfont.eot’);
    src: src: local('☺'),
        url('webfont.eot?#iefix') format('embedded-opentype'),
    url('webfont.woff') format('woff'),
    url('webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Format(s)

Chaque navigateur et système d’exploitation nécessite un format de police particulier. Vous ne disposerez souvent que du format de votre système, ou de celui du graphiste. Heureusement, FontSquirrel propose un convertisseur en ligne gratuit pour obtenir les fichiers dans tous les formats nécessaires, en optimisant le poids, et le code CSS qui va bien dans la foulée.

Aperçu de l’outil @font-face kit generator de Font Squirrel
Aperçu de l’outil @font-face kit generator de Font Squirrel

Comme rappelé en rouge sur l’outil, n’utilisez que des polices pour lesquelles vous avez acquis la licence nécessaire !

Ouvrez ensuite le fichier CSS du site et collez le code indiqué par l’outil de FontSquirrel. Il devrait ressembler au code indiqué ci-après.

Les développeurs de FontSpring, aidés par la communauté, ont écrit, réécrit et testé dans tous les sens pour trouver la syntaxe la plus courte et la plus compatible à la fois (comme d’habitude, Internet Explorer nous fait des misères). Voici ce qu’ils préconisent depuis avril 2011 :

1
2
3
4
5
6
7
@font-face {
    font-family: 'MyWebFont’;
    src: url('webfont.eot’); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* Modern Browsers */
    url('webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
}

Note : Il est possible de déclarer plusieurs sources (en indiquant l’URL), mais le parseur d’IE ne le gère pas, le code ?#iefix sert donc à lui masquer les sources alternatives (en lui faisant croire qu’il s’agit d’un fragment d’URL non significatif).

Dans un avenir relativement proche, le format WOFF sera supporté par la majorité des navigateurs les plus utilisés, il n’y aura plus à s’encombrer de formats exotiques sauf à vouloir à tout prix supporter les vieux navigateurs (IE inférieur à 9 et WebKit sur Android).

Configuration du serveur

Encore un point à surveiller : le type MIME. Certains serveurs refusent de servir les fichiers de polices car l’extension leur est inconnue, IIS en particulier. Vérifiez donc que chaque fichier est correctement renvoyé par le serveur en tapant l’adresse de chaque fichier dans un navigateur. En cas de souci, voici comment configurer les différents différents serveurs du marché.

Apache

Mettre les règles suivantes dans le fichier .htaccess (ou mieux, dans la configuration des hôtes si vous y avez accès).

1
2
3
4
5
# Configuration de type MIME pour les polices
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf        ttf ttc
AddType font/opentype                 otf
AddType application/x-font-woff       woff

Nginx

Ouvrir le fichier mime.types et y ajouter la configuration suivante :

1
2
3
4
application/vnd.ms-fontobject       eot;
application/x-font-ttf              ttf;
font/opentype                       otf;
font/x-woff                         woff;

Lighttpd (Lighty)

Ouvrir le fichier lighttpd.conf et chercher la section mimetype.assign pour y inclure la configuration suivante :

1
2
3
4
application/vnd.bw-fontobject        eot
application/x-font-ttf               ttf
font/opentype                        otf
application/x-font-woff              woff

IIS

  1. Ouvrir le gestionnaire IIS
  2. Dans l’onglet IIS, ouvrir “Configuration des types MIME”
  3. Dans “Actions”, cliquer sur “Ajouter…”
  4. Saisir .otf comme extension, et application/octet-stream dans le champ Type MIME puis valider
  5. Recommencer avec l’extension .woff, à nouveau mettre application/octet-stream dans le champ Type MIME et valider

Les extensions .ttf et .eot devraient être déjà configurées, sinon répétez la manœuvre.

Ressources sur domaine tiers

Si le domaine utilisant les polices n’est pas celui qui les héberge (sous-domaine sans cookies ou CDN par exemple), il faut l’autoriser spécifiquement via l’en-tête Access-Control-Allow-Origin. Sans cet en-tête ou s’il n’est pas configuré pour autoriser la requête, certains navigateurs refusent de récupérer les polices. Il arrive également qu’il soit supprimé par un pare-feu mal configuré, d’où l’importance d’indiquer des polices de substitution adaptées.

Pour indiquer que d’autres domaines sont autorisés à utiliser les polices hébergées par un serveur, modifiez le nom de domaine du code suivant et ajoutez-le dans le fichier .htaccess ou dans la configuration de l’hôte virtuel :

Header add Access-Control-Allow-Origin "http://www.example.org"

Autres usages possibles

Substitution de caractères

Nous l’avons vu, il est possible de retirer des caractères d’une police. En l’associant au mécanisme de substitution des polices définies en CSS (si “Mapolice” n’est pas trouvée, rabats-toi sur “Helvetica”, à défaut sur une sans-serif) et à unicode-range (qui indique quels caractères doivent être pris dans une police donnée), il est possible d’utiliser une police uniquement pour un certain nombre de caractères. Un article de 24 ways explique en détail comment afficher les esperluettes dans une police dans un texte utilisant une autre police.

Polices d’icônes

On commence à voir apparaître des polices d’icônes, qui sont finalement des sprites d’images vectorielles. Il est possible d’appliquer à ces icônes tout ce qui peut s’appliquer à du texte via CSS : taille, couleur, ombre portée, et CSS3 nous promet encore plus de possibilités (text-stroke, background-clip).

Chris Coyer a mis en place une démo montrant les avantages de cette technique. Un autre article de 24 ways montre comment utiliser les attributs arbitraires pour afficher des pictogrammes pris dans une police d’icônes.

Attention, comme le souligne Florent Verschelde l’accessibilité des polices d’icônes n’est pas garantie et vous introduisez une dépendance : si le navigateur ne supporte pas les webfonts ou que le fichier ne se charge pas correctement, le site ou l’application peut devenir inutilisable.

Conclusion

Vous voilà parés pour donner à vos sites la personnalité qu’ils méritent, en déjouant les pièges tendus par les navigateurs et les serveurs, et en optimisant le temps de chargement du site. Sacré programme !

Mais sur le web tout fini par être détourné de son usage premier. On trouve une typographie dont les ligatures correspondent aux smileys et autres pictogrammes, une autre permettant de générer des graphiques. Impossible de dire aujourd’hui jusqu’où on peut aller… Peut-être ouvrirez-vous la voie pour un nouveau détournement créatif de cette technologie ? Si ça se trouve, il y a peut-être un marché pour les polices dont les ligatures correspondent aux emoticons et autres smileys… A vous d’explorer !

(Article mis à jour le 31 mai 2012 pour intégrer les liens vers PicLig et ChartWell)

Quelques liens pour prolonger

En français

En anglais

@font-face : astuces et outils pour bien l’utiliser

Note de cet article : 3 / 5

Pour pouvoir noter les articles, vous devez voyager avec un billet (c'est gratuit !).
Toutes les infos sur la page d'abonnement !
Déjà inscrit ? Connectez-vous.

Intégrateur passionné, Goulven Champenois jongle avec l’accessibilité, l’ergonomie, les performances et le mobile pour une expérience utilisateur optimale intégrant les dernières évolutions technologiques. Formé en grande partie grâce aux sites OpenWeb et Pompage, il rejoint ce dernier en 2006. Trouvant le temps trop long entre deux éditions de Paris Web, il participe à l'organisation de Sud Web depuis 2011. Il propose désormais ses services en tant que consultant web.

Découvrir les autres articles de cet auteur

3 réactions à cet article (RSS)

Christophe_Cl

#1

Topissime article ! Trouver la police, l’utiliser en local, l’optimiser en front et côté serveur : tous les bons conseils -> bookmark :)

Je suis d’accord avec toi pour Photoshop : le rendu qui s’approchera le plus d’un navigateur sera celui en mode Non-lissage. Mais par expérience les maquettes présentées au client plaisent moins. J’ai souvent entendu dire « Cette maquette est belle alors que dans celle là les textes sont pixelisés. » Cela peut paraître stupide, mais parfois les choix se font à ce genre de détails…

Ce pour quoi je propose maintenant et toujours le lissage en mode « léger » des typos dans Photoshop. Le rendu global des maquettes sera plus propre. À notre charge de préciser au client (comme tu le détailles fort bien) que le rendu sera très légèrement différent en HTML et, ce, dans chaque navigateur !

Touffies

#2

Ton article est excellent, il est également très complet.
Bravo

PS : Pour information, il est possible avec Font Squirrel, en mode expert, de sélectionner uniquement les caractères que l’on a besoin et ainsi, de réduire considérablement le poids des fichiers. ( Une petite astuce pour améliorer la performance de votre site ;)

Réagir à cet article

XHTML : Vous pouvez utiliser ces balises : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>