[CSS] Utilisation d'une police personnalisée dans une page web

[Torgar]

Bonjour,

Question : Comment utiliser une police personnalisé pour mon site internet ?

Réponse :
Il faut pour cela utiliser la propriété @font-face. C'est une propriété de CSS disponible la version 2.1, elle est compatible avec les navigateurs suivants : IE 5.5+, Firefox 3.5+, Safari 3.1+, Opera (inconnue), Chrome 0.2+

Voici un exemple :

Code css :

1
2
3
4
5
6
7
@font-face {
    font-family: 'ma_police';
    src: url('ma_police.eot') format('eot'),
    url('ma_police.woff') format('woff'),
    url('ma_police.ttf') format('truetype'),
    url('ma_police.svg') format('svg');
}

Vous vous demandez ce que sont ces fichiers aux extensions si atypiques ? Et bien ce sont des polices traditionnelles de Windows (par exemple) converties dans des formats lu par nos chers navigateurs. Et oui, vous avez bien lu "nos". Car comme c'est souvent le cas, Internet Explorer joue les trouble-fête en acceptant qu'un seul format, l'EOT, pour Embedded OpenType. Le reste des navigateurs comprenant le TrueType Format (TTF). Pour une compatibilité optimale il est recommandé d'utiliser la syntaxe fournie par le générateur de police (voir ci-dessous).

Maintenant, il faut convertir nos polices Windows. Pour ce faire, il existe un site Internet dédié à cette opération : http://www.fontsquirrel.com/fontface/generator/ (en anglais).