Comment imbriquer une fonte dans une page Web ?

L’attribut @font-face est loin d’être récent. Il existait déjà sur Internet Explorer 4 et sur Netscape 4. Malheursement il n’ont pas réussi à se mettre d’accord sur le format de fonte à utiliser.

Il faut aussi savoir qu’à cette époque les connexions ADSL n’était réservé qu’aux plus chanceux d’entre nous. Par conséquent l’intégration d’une police de caractère à une page web était particulièrement pesante pour la bande passante. C’est certainement ces arguments qui ont poussé le W3C a ne pas inclure la propriété @font-face aux spécifications de CSS2.1.

Mais aujourd’hui les choses ont bougés et la propriété est désormais incluse dans CSS3. Tous les navigateurs supportent maintenant cette propriété.

Malheureusement les problèmes de format ne sont pas pour autant résolus. Il en existe 5 types différent que l’ont peut imbriquer dans une page web.

Format .TTF

TrueType est un format vectoriel développé par Apple à la fin des années 1980. Il est aujourd’hui le plus utilisé des formats de police de caractères. Il est présent sur tout les systèmes d’exploitation. Mais il n’est pas compressé et donc pas optimisé pour une intégration web. Cependant nous pouvons palier à ce problème en compressant le fichier avec apache avec mod_deflate ou mod_gzip.

Format .OTF

OpenType est un format propriétaire, développé conjointement par Microsoft et Adobe. Il est basé sur TrueType et est son successeur sur Windows.

Format .EOT

C’est une version de OpenType compressé, qui est utilisé pour l’imbrication dans une page web. Il faut utiliser le Web Embedding Fonts Tool de Microsoft pour pouvoir créer une font de ce format. Le W3C a refusé d’en faire un standard pour CSS3. Actuellement seul Internet Explorer le supporte.

Format .SVG

Scalable Vector Graphics est un standard libre basé sur la lecture d’un fichier XML qui définit une forme graphique de manière vectorielle.

Format .WOFF

Ce format, crée en 2009, est considéré comme la WebFont à utiliser car elle est recommandée par le W3C. Elle sera certainement utilisée comme futur standard. Elle est constituée d’un TrueType compressé et de méta données.

Compatibilité browser/format

Le tableau suivant permet de se rendre compte que la compatibilité entre navigateur et format de font rend difficile le choix d’un format sur l’autre.

Browser .eot .ttf .otf .woff .svg
IE 4 – 8 X - - - -
IE 9 X - - X -
Firefox 3.5 - X X - -
Firefox 3.6 – 4 - X X X -
Opera 10 - X X - -
Opera 11 - X X X X
Safari 3 - X X - X
Safari 4+ - X X X X
Chrome 2 – 3 - X - - X
Chrome 4 - X X - X
Chrome 5+ - X X X X

Exemple d’utilisation de @font-face

Pour utiliser une fonte imbriquée et s’assurer de la compatibilité entre les navigateurs, je vous conseille de charger plusieurs fichiers de la même fonte en précisant le format. Il est donc nécessaire de la déclarer de la manière suivante.

@font-face{  
	font-family: "Ma Jolie Font"; 
	font-style: normal;
	font-weight: normal;
	src: 	url('majoliefont.ttf')  format('truetype'), 
        	url('majoliefont.otf')  format('opentype') ,
        	url('majoliefont.eot')  format('opentype') ,
         	url('majoliefont.woff')  format('woff');
}

Pour utiliser la fonte nouvellement imbriquée, il suffit maintenant d’utiliser l’attribut font-family avec son nom.

html {
	font-family:"Ma Jolie Font";
}

Si vous voulez avec une écriture grasse, il faudra aussi importer un fichier de fonte correspondant à celle-ci. Dans ce cas, dans la déclaration de @font-face, il faudra le préciser grâce à l’attribut font-weight.

@font-face{  
	font-family: "Ma Jolie Font"; 
	font-style: normal;
	font-weight: bold;
	src: 	url('majoliefont-bold.ttf')  format('truetype'), 
        	url('majoliefont-bold.otf')  format('opentype') ,
        	url('majoliefont-bold.eot')  format('opentype') ,
         	url('majoliefont-bold.woff')  format('woff');
}

Dans le cas d’une écriture en italic, il faudra le préciser de la même manière grâce à l’attribut font-style:italic

Articles similaires :

Mots-clefs : , , ,

Un commentaire sur “Comment imbriquer une fonte dans une page Web ?”

  1. Decaps dit :

    Pour ma part, si la police est connue, je préfère utiliser l’API de google :
    @import url(http://fonts.googleapis.com/css?family=Example);

Laisser une réponse