Une police perso sur le web

Comment dire à son CSS d’afficher une police non-installée sur le système du webnaute ?

Beaucoup d’entre vous qui débutez comme moi en webdesign se demandent comment diable installer une jolie police sur son site, qui soit compatible avec tous les explorateurs d’une manière élégante ? Et bien, il n’existe pas de recette miracle. Mais certains hackers ont tout de même réussi à nous fournir du code générique et court ! De plus, il existe un outil extrêmement simple d’emploi pour créer ses propres webfont : l’écureuil des polices. Un grand merci à eux !

Ainsi la marche à suivre devient plutôt simple :

1. trouver une police élégante ET LIBRE (si vous ne voulez pas de problèmes) sur des sites tels que Font Squirrel, Google Web Fonts, fontSpace, 1001 Free Fonts, dafont.com, …
2. télécharger le fichier *.ttf de votre police sur votre machine
3. l’envoyer sur le font face generator de Font Squirrel
4. télécharger les polices web créées puis les uploader sur votre serveur web
5. éditer vos css comme indiqué plus bas. Il est à noter que le font face generator fournit en même temps que les polices un document HTML très pratique pour s’inspirer, voire débuguer votre page web.

Edition de vos CSS

Tout d’abord vous devez déclarer votre nouvelle police :

@font-face {
    font-family: 'Cardiff';
    src: url('cardiffitalic-webfont.eot');
    src: url('cardiffitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('cardiffitalic-webfont.woff') format('woff'),
         url('cardiffitalic-webfont.ttf') format('truetype'),
         url('cardiffitalic-webfont.svg#CardiffMediumItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ce qui permet d’utiliser la police “Cardiff” dans votre CSS, comme ci-dessous :

.ddsmoothmenu-v ul{
font: 14px 'Cardiff', Verdana;
}

Voilà, j’espère que vous vous amuserez bien !

Références :

• la police de mon titre, Raleway
• la police de mon menu, Cardiff
• la police dans mes balises “pre”, Ubuntu Mono
• the new bulletproof @font-face syntax (article)
• Further Hardening of the Bulletproof Syntax (article)