Follow me
RSS feed
My sources
My Viadeo

@font-face

Greg | 19 May 2010

MAJ du 21 mai 2010 - Pour information, Google met maintenant à disposition un serveur de police accessible à l'adresse http://code.google.com/webfonts. Il vous permet d'ajouter des polices dans vos sites en ajoutant un lien vers une CSS du serveur.

Projets Il aura fallu attendre septembre 2009 et la sortie d'Opera 10 pour pouvoir utiliser @font-face sereinement1 dans ses sites web.

@font-face fait partie de la spécification CSS32 et permet d'utiliser, dans une page HTML3, une police de caractères personnalisée, et donc sans être dépendant des polices installées sur le poste de la personne visitant le site.

Prenons un exemple. Il y a peu de chance que vous ayez installé la police Black Boys On Mopeds sur votre machine. Et pourtant, en utilisant @font-face dans ma feuille de style, je peux l'utiliser dans mon site :

Portez ce vieux whisky au juge blond qui fume.

Pour cela, voici ce que j'ai ajouté dans ma CSS :

@font-face {
  font-family: 'BlackBoysOnMopeds';
  src: url('BlackBoysOnMopeds.eot');
  src: local('\u263a'), url('BlackBoysOnMopeds.ttf') format('truetype');
}

Suite à la mise en place de cette règle, je suis en mesure d'utiliser la police Black Boys On Mopeds.

Pour déclarer la règle, nous commençons par donner le nom de la police, tel qu'il sera utilisé par la suite, via le descripteur font-family. Ensuite nous utilisons le descripteur src pour donner le lien vers le fichier de police. Vous noterez que dans le cas présent il en existe deux. En effet, IE4 préfère utiliser des polices Embedded Open Type là ou tous les autres supporterons du True Type ou de l'Open Type. C'est la raison pour laquelle nous devons déclarer les deux sources.

Nous utilisons une indication de format (format()) après la source de la version True Type, espérant ainsi qu'IE ne prenne pas en compte ce format. Malheureusement ce truc est buggé et interprète mal le chemin qu'il comprend, dans le cas présent, comme BlackBoysOnMopeds.ttf') format('truetype. Tout naturellement ceci ne mène nulle part et conduite donc à une erreur qui ne permet par d'utiliser la police. Il existe une solution consistant à utiliser des commentaires conditionnels :

<!--[if !lte IE 8]>
<style type="text/css">
@font-face {
  font-family: 'BlackBoysOnMopeds';
  src: url('BlackBoysOnMopeds.ttf') format('truetype');
}
</style>
<![endif]-->

<!--[if lte IE 8]>
<style type="text/css">
@font-face {
  font-family: 'BlackBoysOnMopeds';
  src: url('BlackBoysOnMopeds.eot');
}
</style>
<![endif]-->

Cela fonctionne, mais c'est un peu lourd ! La meilleure solution, à mon sens, est celle de Paul Irish qui consiste à déclarer une police locale en utilisant un caractère Unicode sur deux octets. Ceci règle, non seulement le problème potentiel de la présence d'une police de même nom déjà installée sur le poste du visiteur, mais également celui d'IE.

Dernière petite chose, Microsoft préférant utiliser ses propres polices, et sachant que vous trouverez plus facilement des fonts True Type, voici un lien vers un outil en ligne permettant de créer une police EOT à partir d'une police TTF.

1 et encore !!!
2 Dont les premières versions datent tout de même de 2002
3 Web, devrais-je dire !
4 j'ai l'impression de faire un retour dans la fin des années 90 en écrivant cela...

Copyright © 2009 - 2011 Grégoire Lejeune.
All documents licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License, except ones with specified licence.
Powered by Jekyll.