Utiliser la police de votre choix avec CSS (Sans Typeface,Javascript,...) (Firefox, Safari, Chrome, IE 6-7-8)

Je ne suis pas designer. Alors moi utiliser une autre font que Verdana ça n'as jamais été un problème. Seulement en tant que programmeur ça me fait toujours rager d'inclure plusieurs fichiers javascripts dans une page web. Surtout quand ils n'ont pas été écrit par moi. Jusqu'à aujourd'hui, j'utilisais(ou plutôt, les designers avec qui j'ai travaillé utilisaient) typeface.js qui permet d'utiliser la police de votre choix sur votre site web. C'est bien beau... Mais typeface reste un script javascript qui recréé à la volée votre texte sous forme d'image en utilisant plusieurs techniques (dépendant du navigateur) assez demandante. De plus, si vous utilisez document.domain = 'domaine.com' dans votre code javascript pour pouvoir communiquer en AJAX entre plusieurs sous-domaines, typeface ne fonctionnera tout simplement pas sur Firefox... J'ai fouillé et il semblerait qu'on ne peut accéder à la propriété .cssRules, nécessaire au démarrage de typeface, quand on a utiliser la variable document.domain. Bref, de la merde. Quand on a la chance de faire quelque chose de relatif au design seulement en CSS, on en profite!

Alors voici comment inclure le fichier ttf de votre choix à votre site web en CSS:

@font-face { 
   font-family: "votre Police"; 
   src: url( /chemin/vers/votre/police.eot ); /* IE */ 
   src: local("vrai nom de la police"), url( /chemin/vers/votre/police.ttf ) format("truetype"); /* autres navigateurs */ 
} 

/* Vous pouvez maintenant utiliser votre police */ 
h1 {
   font-family:"votre Police", verdana, helvetica, sans-serif;
} 

Première question: c'est quoi un fichier .eot!?
Il s'agit du format de police pris en charge par Internet Explorer. Pas de problème vous pouvez convertir votre fichier .ttf en .eot en allant à http://ttf2eot.sebastiankippe.com/

Deuxième question: Pourquoi je dois écrire "vrai nom de la police" dans local()?
L'instruction local() sert à charger une police sur l'ordinateur local si elle est présente. Vous éviterez alors au navigateur de télécharger votre police. Le nom qui doit se trouver dans local() est le nom d'origine de la font.

Notes importantes
- Vous pouvez définir font-family avec le nom de votre choix, mais il faudra utiliser ce nom pour l'attribuer à des éléments ou classes CSS.
- Il faut toujours placer la ligne src: du fichier .eot en premier. (Sinon la police ne fonctionnera pas sur Internet Explorer)
- Il faut toujours écrire local() avant le url() du fichier .ttf (Sinon Internet Explorer va charger votre fichier ttf inutilement)

Compatibilité avec les différents navigateurs
Safari v3.1 et + : TrueType(.ttf) et OpenType(.otf)
Safari iPhone : Police SVG
Opera v10 et + : TrueType(.ttf), SVG(.svg) et OpenType(.otf)
Internet Explorer v4 et + : Embedded OpenType (.eot)
Firefox v3.5 et + : TrueType(.ttf) et OpenType(.otf)
Chrome v4 et + : TrueType(.ttf) et OpenType(.otf)
Netscape v4 et + : Portable Font Resource (.pfr)

Référence : http://webfonts.info/wiki/index.php?title=@font-face_browser_support


Mise à jour
Google (on les aime) offre maintenant une api qui simplifie tout ce processus :
http://code.google.com/intl/fr/apis/webfonts/