Il a toujours été recommandé depuis les débuts du web d’utiliser une police standard pour les pages web comme Arial ou Verdana installées sur tous les systèmes d’exploitation. L’utilisation d’une police non standard ou « exotique » ne pouvant être visible par l’internaute que si elle est installé sur son poste.

Récemment, j’ai travaillé sur un projet Typo3 au sein de ma société dont le client souhaitait l’utilisation d’une police non standard pour les titres. Une première solution a été la génération d’images. Après une recherche approfondie sur le sujet, il s’est avéré qu’il existe une solution « full CSS » en utilisant une règle nommée @font-face…

La petite histoire de @font-face

@font-face a été implémentée dans CSS2 dès 1998. Ce mécanisme avait pour but de forcer le téléchargement de la police par le navigateur qui permet ensuite d’être utilisée sur la page web. Internet Explorer sera le premier à l’implémenter dès la version 4 et sera pendant très longtemps le seul à le faire.

Le frein à cette implémentation était dû au fait que le téléchargement de la font rajoute un poids conséquent à la page (parfois plusieurs centaines de Ko) et la plupart des polices sont protégées par le droit d’auteur. Le groupe de travail CSS au W3C décida alors de supprimer cette règle de CSS 2.1 et de la repousser dans CSS 3.

Ces derniers temps, @font-face est revenue en force avec son implémentation par la plupart navigateurs du marché (Firefox, Chrome, Opera et Safari) comme le montre le tableau ci-dessous :

Navigateur Version
Internet Explorer 4+
Firefox 3.5+
Chrome 4+
Safari 3+
Opera 10+

Les différents formats de police et leurs supports par les navigateurs

Le tableau ci-dessous montre pour chaque navigateur les formats de police supportés et à partir de quelle version ils ont été implémentés :

Format Internet
Explorer
Firefox Chrome Safari Opera iOS/Safari
Android
EOT 4+ x x x x x x
TTF 9+ 3.5+ 4+ 3.1+ 10+ 4.2+ 2.2+
OTF 9+ 3.5+ 4+ 3.1+ 10+ 4.2+ 2.2+
WOFF 9+ 3.6+ 6+ 6+
(planifié)
11+ x x
SVG x x 4+ 4+ 10+ 3.2+ 3.0+
SVGZ x x 4+ 4+ 10+ x x

EOT (Embedded OpenType) est un format de police web propriétaire créé par Microsoft pour Internet Explorer, supporté par IE dès la version 4! C’était le seul format supporté par ce navigateur jusqu’à la sortie d’IE9 qui a intégré le standard WOFF et le support des polices TTF/OTF. Il reste donc incontournable pour le support des anciennes versions d’IE.

TTF (TrueType Font) est le format de police système le plus courant sur Windows et Mac OS. Son usage pour les webfonts devrait disparaitre au profit du format WOFF.

OTF (OpenType Font) est un format basé sur TrueType développé conjointement par Microsoft et Adobe. Il apporte la gestion des caractères spéciaux en typographie comme les ligatures ou les fractions.

WOFF (Web Open Font Format) est un format développé par la Fondation Mozilla en 2009. Soumis en 2010 au W3C (soutenu par Microsoft et Opera), il est destiné à devenir le format universel de web fonts. C’est un format dit « conteneur » de fonts TrueType, OpenType et Open Font Format compressé par un encodage WOFF (taille réduite de 40% par rapport au format TTF). Il est supporté par les dernières versions de tous les navigateurs sauf Safari (planifié toutefois pour la v6).

SVG (Scalable Vector Graphics) est un format vectoriel qui utilise le XML pour décrire les objets graphiques ce qui lui assure une excellente qualité pour toutes les tailles de texte. Ce format n’est pas supporté par IE et Firefox et l’inconvenient majeur du SVG est sa taille qui est à peu près 25% supérieur au format TTF. Attention il y a parfois une incompatibilité avec certaines propriétés CSS (letter-spacing notamment).

SVGZ est le format SVG gzippé (compressé). La taille obtenue est encore plus légère que le format WOFF! En général, le fichier SVGZ représente 1/8 à 1/3 de la taille d’origine du fichier SVG.

Comment ça marche?

Déclaration de la règle en CSS (Fontspring @font-face Syntax)

La déclaration d’une règle @font-face doit se faire obligatoirement avant toute utilisation de la police personnalisée. Le code CSS ci-dessous vient du site FontSpring.com qui a élaboré une syntaxe particulière de la déclaration de la règle @font-face appelée Fontspring @font-face Syntax (basé sur la Bulletproof Syntax de Paul Irish et la Mo’Bulletproofer Syntax de Richard Fink) qui permet la compatibilité avec les principaux navigateurs classiques et mobiles du marché.

@font-face {
	font-family: 'MyFont';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('myfont-webfont.woff') format('woff'),
             url('myfont-webfont.ttf') format('truetype'),
             url('myfont-webfont.svg#MyFont') format('svg');
	}

Les principales propriétés de la règle @font-face sont « font-family » qui est le nom de la police à utiliser et « src » qui informe sur la localisation et le format des fichiers de la police.

  • La première ligne dans « src » est la déclaration du fichier de police au format EOT, qui est reconnu uniquement par IE. Le ?# est un hack pour éviter que IE tente de télécharger le fichier de font suivant.
  • La seconde ligne est celle du format WOFF reconnu par Firefox 3.6+, Chrome 6+ et Opera 11+.
  • La troisième est celle du format TTF qui sera pris en charge par Firefox 3.5, Chrome 4-6, Opera 10, Safari 3.1+et iOS/Safari 4.2+.
  • Enfin la dernière ligne est celle qui sera utilisée par i0S/Safari <4.2. Le # suivi du nom de la font est obligatoire pour que la ligne soit interprétée.

Remarque : Chaque navigateur tentera uniquement de télécharger le premier fichier de font compatible avec sa version (sauf IE d’où le hack après l’extension .eot)

Exemple d’utilisation pour un titre h1

h1 {
font-family: 'MyFontFamily', Arial, sans-serif;
}

Il est recommandé de spécifier une police standard de rechange (aussi appelée « web safe font ») comme Arial, Verdana ou Georgia au cas où la font serait introuvable.

Le problème ClearType

Malgré le fait que les dernières versions de Chrome, Safari et Opera supportent le nouveau format WOFF ainsi que TTF/OTF, le rendu à l’écran peut être mauvais dans certaines configurations du système de l’internaute, les caractères n’étant tout simplement pas lissés. Cela est dû à ClearType, une technique mise au point par Microsoft qui permet d’obtenir sur les écrans plats une netteté équivalente à l’impression papier. Disponible à partir de Windows XP SP3, elle est désactivée par défaut sur ce système mais activée par défaut sur Vista et Seven! Avec ClearType désactivée, le rendu à l’écran devient parfait sur Safari, Chrome et Opera (il est toujours net sur Internet Explorer et Firefox).

Ma syntaxe @font-face alternative

J’ai élaboré une syntaxe @font-face améliorée permettant d’obtenir le meilleur rendu sur tous les navigateurs, toutes versions et OS confondus, ClearType activé ou non!

Au préalable, il est nécessaire d’ajouter la déclaration du format compressé SVGZ à Apache dans le fichier .htaccess de votre site afin que la police soit utilisable sur Chrome et Safari, Opera fonctionnant bien sans :


<IfModule mod_mime.c>
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
</IfModule>

Ajoutez sur votre feuille de style :

@font-face {
	font-family: "MyFont";
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('myfont-webfont.svgz#MyFont') format('svg'),
             url('myfont-webfont.woff') format('woff'),
             url('myfont-webfont.ttf') format('truetype'),
             url('myfont-webfont.svg#MyFont') format('svg');
      font-weight:normal;
      font-style:normal;
      font-variant:normal;
 }

Explication…

  • Tout d’abord, le nom de la police qui doit être entourée de double-quotes et non de simples quotes sinon Opera ignorera tout simplement la police personnalisée!
  • Le format EOT sera interprété par IE toutes versions confondues.
  • Le format SVGZ pour Opera 10+, Safari 4+ et Chrome 4+.
  • Le format WOFF destiné uniquement à Firefox 3.6+.
  • Le format TTF sera utilisé par Firefox 3.5, Safari 3.1, iOS/Safari 4.2+ et Android 1.5+.
  • Le dernier format, SVG, est quand à lui destiné à iOS/Safari 3.2.
  • Un problème d’épaisseur du gras certaines fonts avec Webkit (Chrome/Safari) est résolu en appliquant la valeur « normal » aux propriétés CSS suivantes : font-weight, font-style et font-variant.

Avantages de cette syntaxe :

  • Compatibilité pour tous les navigateurs classiques et mobiles.
  • Résout le problème ClearType de lissage des polices sur Windows Vista et 7 pour Opera, Safari et Chrome avec l’utilisation du format SVGZ au lieu de WOFF. De plus, le format SVGZ est plus léger que le WOFF.
  • L’ordre dans la liste des formats (hormis EOT) va du plus léger (SVGZ) au plus lourd (SVG).

Inconvénient :

  • Comme pour la Fontspring Bulletproff Syntax, IE9 chargera la police au format EOT, plus lourde que le format WOFF qu’il supporte.

Comment convertir facilement sa police dans les différents formats?

Fontsquirrel propose le génial @font-face Generator permettant de convertir votre police dans les différents formats et propose de nombreuses options permettant d’améliorer le rendu et d’optimiser la taille des fichiers générés en supprimant par exemple des caractères non nécessaires.

Alternatives à @font-face

Google Fonts API

Google a lancé en 2010 Google Fonts API proposant aux webmasters une bibliothèque de fonts et leur permettant de les utiliser en insérant simplement un bout de code JavaScript dans leurs pages web sur le même principe des bibliothèques Ajax comme jQuery. Le nombre de fonts proposés par Google est malheureusement assez limité. Google propose également en partenariat avec TypeKit, un autre fournisseur de fonts, le Webfont Loader permettant au webmaster de gérer plus finement les polices chargées (en JavaScript).

TypeFace.js

TypeFace.js est une librairie JavaScript qui utilise le moteur de graphisme vectoriel du navigateur pour écrire le texte HTML de votre police personnalisée. Il est nécessaire pour cela de convertir sa police TTF en format spécial TypeFace grâce à ce générateur. Sont supportés Firefox 1.5+, IE6+, Safari 2+.

Conclusion

La règle @font-face et le support de formats de police universels par tous les navigateurs vont permettre la démocratisation des webfonts sur le web dans les années à venir. C’est le format de police WOFF soutenu par le W3C qui devrait s’imposer mais les développeurs devront toujours continuer à supporter d’anciens formats comme EOT pour rester compatible avec les anciennes versions d’IE.

Comparé aux images générées pour des titres utilisant une police exotique, @font-face améliore la vitesse de chargement des pages en évitant les nombreuses requêtes HTTP ainsi que le niveau d’accessibilité.

Be Sociable, Share!