[Html / Css] Utiliser des fonts personnalisées sur votre site web

Marre de devoir utiliser du Tahoma, de l'Arial, du Comic Sans MS, du Courrier, ... pour notre tout nouveau tout beau site web ? Chaque webmaster / graphiste qui sommeille en nous en a marre de voir ces polices "old school" de partout !!

Vous l'avez peut-être remarqué, j'utilise sur ce site une police personnalisée (Geo Sans Light), comme pour le header, le menu et les différents titres.

Heureusement, depuis peu une propriété CSS refait surface : @font-face.

Compatibilité

• Safari 3.1 +
• Opera 10 +
• Opera Mobile 9.7 +
• IE 4 +
• Firefox 3.5
• Chrome 4.0 +
• Netscape 4 +

Historique

La propriété Css @font-face a été introduite depuis le CSS2 peu avant les années 2000. Tout webmaster vu ravi de cette évolution, qui était compatible sur la plupart des navigateurs du moment.

Malheureusement, il persistait plusieurs format de polices différentes, et la guerre des navigateurs fit que personne ne pu se mettre d'accord sur un format unique. A cela se rajoute le fait qu'à cette époque, le haut débit était peu répandu, donc l'ajout de police personnalisée dans le téléchargement de la page la rendait lourde. C'est donc pour cela que peu de mon de l'a mis en place.

Avec la mise à jour du CSS2.1, cette propriété a tout simplement été supprimée.

Il faudra attendre le CSS3 pour qu'elle refasse surface, et puisse enfin être exploitée correctement.

Mise en place

Tout d'abord, il vous faut bien évidemment une police ! De nombreux sites permettes d'en télécharger gratuitement comme Dafont, 1001FreeFont, ...

ATTENTION : Vérifiez bien que la police que vous télécharger disposes des droits suffisant pour l'utilisation sur un site web publique !

Vous vous retrouvez donc avec une police au format .ttf, c'est bien mais ... et maintenant on en fait quoi ??

Première complication, c'est que les navigateurs n'ont pas tous la possibilité de lire tous les format existants ... il va donc falloir avoir votre police dans tous les format utiles. N'ayez crainte, il existe un outil en ligne très pratique qui va vous permettre de toute faire : Fontsquirrel

Vous chargez votre font, et vous téléchargez le kit qu'il vous propose, vous vous retrouvez donc avec 4 fichier (les autres de l'archive ne sont pas utiles) :

1. VotreFont.ttf (celui d'origine)
2. Votrefont.eot
3. Votrefont.svg
4. Votrefont.woff

La suite va être très simple, il vous suffit de rajouter en haut de votre feuille de style :

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

Par exemple voici la déclaration faite pour la police que j'utilise pour mon site :

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

Il ne vous reste plus qu'à définir dans n'importe quelle déclaration CSS, le choix de votre font custom :

#id { 
    font-family:nom_de_la_font;
}

ATTENTION : La déclaration ci-dessus est à proscrire ! Il faut TOUJOURS spécifier au moins une police native, dans la cas où le visiteur ne puisse télécharger la police spécifiée, ou si elle est incompatible.

Faire plutôt :

#id {
    font-family:nom_de_la_font, sans-serif;
}

Il ne vous reste plus qu'à admirer le résultat !

Je vous conseille de ne pas utiliser de police trop complexe, sous peine d'avoir une écriture illisible. Dans mon cas avec le Geo Sans Light, je dois utiliser de la typo assez grande pour avoir un rendu correct sur tous les navigateurs.

J'espère que cette astuce vous sera utile, n'hésitez pas si vous avez des questions, et à poster vos résultats en commentaire.