La police : embarquée ou en garde à vue ?

Comment compresser les polices font-face ?

C'est la question que je me suis posée le weekend dernier en pratiquant à l'aide d'YSlow et de PageSpeed des optimisations visant à améliorer les temps de chargement des pages.
Et là : question. Comment vais-je faire pour réduire la taille de la police caractères que je sers via la propriété de ma CSS, @font-face ?

La zipper ? Bien sûr. Mais comment ? C'est que ça finit par peser lourd ces fontes. De 100 à 200 Ko en général. Mais jusqu'à 1 Mo pour les plus fantaisistes. 2, 3 polices et vous avez la page aussi chargée que l'haleine d'un gendarme après une séance de Pastis avec ses collègues.

• • •

Mais tout d'abord :

Comment utiliser @font-face dans sa CSS ?

Font-face ? D'où ça vient ?

La propriété @font-face n'a rien de particulière à CSS3. C'est même Micromou qui en a eu l'idée. Si...si. Depuis IE3 et CSS2 même. C'est vous dire la découverte ! Micromou l'avait incorporé dans son brouteur pour pouvoir afficher ces FONT-FACE pour palier le problème pour les designers des polices dites « systèmes ». Il a inventé cette notion de polices embarquées avec l'idée, bien sûr, que ces caractères transportés par un fichier de polices, ne seraient lus qu'avec Internet Explorer. Satanas ! Encore raté.

Font-face ? Comment l'utiliser ?

Vous allez voir c'est tout simple :
Tout d'abord on déclare le nom de famille générique de la police que l'on veut utiliser. Ici c'est mon vieux Goudy de 1911 parce que je suis résolument moderne en plus d'être beau, génial et humble.
Après ? Hop ! on déclare les jeux de règles pour chaque cas :
En local ? Pas la peine de télécharger : on prend la police résidente sur le disque telle que.
Pour Microsoft ? C'est le format eot.
Les autres ? On va leur servir du svg, du ttf, du woff (couché Brutus !) et de l' otf. C'est le navigateur qui va décider selon ses possibilités.
Après avoir précisé la police utilisée, on va déclarer des polices de substitution au cas-zou et ce, dans la même famille, ici Serif : Georgia, Times New Roman, Times. Ainsi, si pour une raison ou pour une autre, la police n'était pas chargée nous aurions une solution de repli, le fallback, qui se substituera à celle qui n'aura pu être affichée. Poil au nez.
Et voici le code :

@font-face { /* c'est la déclaration */ 
font-family: "Goudy" 
    src: url("font/goudy_bookletter_1911.eot"); 
    src: local("Goudy"), 
        url("font/goudy_bookletter_1911.woff") format("woff"), 
        url("font/goudy_bookletter_1911.otf") format("opentype"), 
        url("font/goudy_bookletter_1911.s#webfont") format("svg"); 
        } 
    /* pour imprimer les fontes : */ 
    h1 { font: 24px/1 Goudy, Georgia,"Times New Roman",Times,serif} 
    h2 { font: 18px/1 Georgia,"Times New Roman",Times,serif} 
    h3 { font: 14px/1 Georgia,"Times New Roman",Times,serif} 
    /* pour utiliser cette police en tant que class : */ 
    .Goudy{Goudy}

Où trouver des polices font-face ?

Pour disposer de tous ces formats ? La meilleure page c'est celle qu'on trouve sur le site de Font Squirrel où ils nous présentent leurs noisettes dans un catalogue de fontes @font-face. Dans chacune des archives vous y trouverez la feuille de styles prête à l'emploi.

Mais est-il toujours nécessaire d'embarquer ses propres polices ?

Non : Google vous offre de les héberger pour vous. C'est le projet Google Font Directory. Vous choisissez celle qui vous plaît dans leur catalogue (qui ne va pas tarder à s'enrichir de nombreuses autres) et vous les appeler via une API :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>

C'est sur cette page que vous trouverez toutes les options de l'API.
Si vous choisissez d'embarquer vos polices il vous reste à compresser la police pour plus de fluidité lors du transfert vers le cache du navigateur de votre visiteur.
C'est ce que vous aller voir maintenant :

La compression de font-face

La solution passe par le serveur comme vous l'avez sans doute deviné. Qui dit serveur, dit .htaccess dont je baragouine la langue, Apache en l'occurence. Il faut bien sûr que votre hébergeur pour votre contrat offre la compression dans les options du serveur qui abrite votre domaine. 2 modes sur le serveur doivent être actifs : mod_mime et mod_deflate.
Et encore je n'en suis pas certain. Un indien m'a soufflé qu'en l'absence du mod_deflate il y avait des solutions différentes selon les hébergeurs. Mais là je ne suis pas compétent pour vous en parler.
Toujours est-il que chez mon hébergeur ça semble marcher. Voici le code que j'ai mis dans mon .htaccess :

#
Addtype font/otf .otf
Addtype font/svg .svg
Addtype font/ttf .ttf
Addtype font/eot .eot
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/otf
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/svg
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/ttf
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/eot
#

Ça marche ? Euh... ça semble mais j'ai ce curieux message via l'analyseur YSlow :
Compressing http://on-air.hiseo.fr/font/goudy_bookletter_1911-webfont.woff could save 22B (0% reduction)
« 22B » ? « 0% reduction » ? Hum.... je vous avais prévenu : moi pas grand chef indien du tout.
Si un grand Chef Apache passe par là...
Hugh !

  1. Woff est un nouveau format optimisé. Inutile donc de l'ajouter à la liste des polices à compresser.
  2. ObjectifMars a une sacrée astuce pour réduire encore le poids de la police.
    C'est dans ce commentaire.
  3. Sur 1and1 ce code semble fonctionner :
    #
    AddType application/x-font-ttf 1and1
    AddType application/x-font-otf 1and1
    AddType application/x-font-svg 1and1
    AddType application/x-font-eot 1and1
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/otf 
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/svg 
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/ttf 
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/eot
    #



Commentaires :

Johan||#1
Johan
La partie sur le mime-type et la compression avec le fichier .htaccess est intéressante.
Mais en faisant un petit test, je me rend compte que vos fonts ne sont pas envoyées par le serveur avec le bon type MIME...
J'ai le même "problème", elles sont envoyés en tant que "application/octet-stream"...

Je ne pense pas que cela pose un problème de performance, mais cela fait des erreurs sur l'affichage de la page...Et j'aimerai éviter...

PS: A priori le service de Google a un impact assez important sur les perfs à cause des résolutions DNS. A voir à l'usage si il ne vaut pas mieux héberger soit meme les fonts de Google...
Vincent Voyer||#2
Vincent Voyer
"Compressing http://on-air.hiseo.fr/font/goudy_bookletter_1911-webfont.woff could save 22B (0% reduction)"
=> il s'agit simplement d'une différence de niveau de compression gzip entre ton serveur et ce qu'utilise yahoo pour faire le calcul du gain possible avec le gzip.

La doc d'Apache sur la compression

Mais franchement 22 octets, who cares!

Sinon ça marcherait pas ça ?

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/otf font/svg font/ttf font/eot font/woff ?

hugh
Philippe||#3
Philippe
Hello Johan

Pour le bon type MIME le addtype ne suffirait pas ? J'ai essayé un paquet de code différents pour mon .htaccess et tu me dis que même celui-là n'est pas efficace ?

Allons bon !

On va peut-être avoir des indiens qui vont passer par ici et nous dire quelques mots doux d'Apache. ;-)
lordgun||#4
lordgun
Si on regarde la spec woff, ces fichiers sont déjà compressés (la doc de Woff) donc mod_deflate ne fait pas grand chose de plus (en zippant un .zip, on obtient le meme résultat)

Concernant l'hébergement de fonts par Google (et les lib javascripts), foncez !
En effet, un internaute passé sur un autre site faisant héberger ces fichiers par Google aura ces fichiers dans le cache et verra plus site s'afficher plus vite.

D'autre part, un navigateur ne peut télécharger que plusieurs fichiers à la fois du même domaine, si vous avez plusieurs .css et .js, il faudra plusieurs allers-retours avec le serveur avant d'afficher la page. Héberger ces fichiers ailleurs est moyen d'accélérer. C'est ce que j'ai essayé de faire sur Le comparatif moto ou scooter

Après, il y a la notion de dépendance à Google....
Mr.MoOx||#5
Mr.MoOx
Bon résumé :)

Ayant le même problème, j'ai chercher un peu les types, et j'ai vu des gens qui mettaient un peu des types du genre:

application/x-font-ttf

application/x-font-truetype

application/x-font-truetype-font

application/x-font-openfont

[...]

Que dirais un pro du MIME ?
Maurice Svay||#6
Maurice Svay
Il faut noter que WOFF est déjà un format compressé, donc la compression avec mod_deflate n'aura pas beaucoup d'effet sur le poids des polices dans ce format.
Philippe||#7
Philippe
@ Maurice

Ah ! Voilà la raison de ce troublant message qu'YSlow renvoyait.

@ Mr.MoOx

j'avais essayé ça aussi :
AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .svg .ttf .otf .woff

sans succès :(

[EDIT] :
Oups je m'aperçois qu'il y a des commentaires en attente de validation.
Je fais le ménage... et je reviens.

[EDIT#2] :
C'est qu'on en a maintenant des indiens qui viennent faire des signaux de fumée.
Il y a 137 personnes sur ce post au moment où j'écris cette ligne.
J'espère qu'il n'y a pas de gendarme.

@ Vincent
T'aurais pu mettre un lien vers ton site. ;-)

@ lordgun
Tu viens de te ramasser une belle ancre. Ça t'apprendra à faire des commentaires très pertinents avec plein de remarques très intéressantes. :-D
Vincent Voyer||#8
Vincent Voyer
On oublie pour mon histoire de compression gzip car j'avais mal lu (honte à moi) que tu parlais du format WOFF (que je ne savais pas encore compressé jusqu'à ce que je regarde de plus près ce midi).

Si on essaye de compresser une donnée déjà compressée on peut en effet obtenir l'effet inverse, augmentation du poids.

Ma supposition reste valide pour certains cas ou la compression gzip de votre apache sera inférieure à celle d'autres serveurs, selon votre config...

Concernant les mime types un peu plus d'infos ici :
Gzip Support for .ttf Files

il faut avoir le mod_mime installé
ObjectifMars||#9
ObjectifMars
Il serait difficile de compresser une police .woff puisqu'il s'agit d'un format compressé.

Par ailleurs, un meilleur moyen de réduire le poids des polices est encore de supprimer tous les caractères que l'on n'utilisera pas (Hébreu, cyrillique,etc), là cela fait une énorme différence, de quoi pouvoir pourquoi pas se laisser tenter à ajouter les gras et italiques des polices peut-être. Et ça tombe bien un outil miraculeux est là pour nous aider sur le site de Font Squirrel cité dans le billet.
  1. aller sur le générateur de font-face
  2. uploader sa police et choisir EXPERT
  3. jouer avec les options de la section Subsetting

Avec le bon choix de sous-ensembles, le poids chute à moins de 50ko tout format confondus.
Philippe||#10
Philippe
@ ObjectifMars

En voilà une immense idée !
Bravo. Que dis-je ? Bravissimo !

[EDIT] :
Pour 1and1 il y a cette curieuse instruction dans leur FAQ

L’ajout de Mime Type est très intéressant pour ajouter de nouvelles extensions au serveur.
Vous pouvez ainsi en utilisant l’exemple ci-dessous faire prendre en charge l’extension .1and1 par Flash :
AddType application/x-shockwave-flash 1and1

Mr.MoOx tenait bel et bien une piste.
Johan||#11
Johan
@Vincent Voyer :J'ai fait quelques essais mais je n'ai pas réussi à supprimer cette erreur de Mime type...
Je vais garder les liens dans un coin de ma tête pour quoi j'aurai plus de temps... Merci!

@ObjectifMars : tu as raison, c'est la technique que j'avais utilisé pour obtenir des fonts qui faisaient moins de 30ko au lieu de 75ko.
Mr.MoOx||#12
Mr.MoOx
Du coup, avec tout ça, moi j'ai fini par mettre ça :

Addtype font/opentype .otf .eot
Addtype font/truetype .ttf
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/javascript text/text font/opentype font/truetype image/svg+xml


Comme remarque on notera que je n'ai pas mis svg dans les fonts, car à la base c'est un format d'image texte et son mime type est donc image/svg+text. Par contre je l'ai mis dans la liste des type à compresser via gzip.
Eot étant Embedded OpenType, je l'ai mis avec le même type que OpentType (doù le font/opentype .otf .eot). A voir si c'est bien.

PS: je sais pas trop comment mettre du code là dedans, mais mes certaines balises passent pas... :(
Philippe||#13
Philippe
On peut pas mettre de code Mr Moox.:-(

J'en suis désolé mais jusqu'à maintenant j'ai privilégié la sécurité.
Mon script doit s'enrichir d'une telle fonctionnalité mais je vais utiliser un script externe. Lequel ? Je ne sais pas encore.

J'avais fait une mise à jour de l'article pour le cas 1and1. Je ne sais pas si tu l'avais vu.

Je corrige aussi ton commentaire avec le code que tu as posté.

Merci d'être reviendu pour nous dire ta dernière expérimentation.
[EDIT] :
Ton code marche tout autant sur 1and1. Grazie mille.

Les commentaires pour ce billet sont fermés