Utilisation de @font-face pour utiliser n’importe quelle typographie en web

Avec les nouveaux navigateurs, les nouvelles normes et les nouvelles technologies on peut maintenant sereinement utiliser la propriété CSS @font-face et faire en sorte que ça marche sur tous les navigateurs ! Avec certes un ou deux hacks CSS, notamment pour IE6 et pour éviter que des fichiers soient chargés plus que nécessaires.

Voici par exemple, la technique utilisée et décrite par Paul Irish (qui travaille, entre autres, pour Google Chrome et fait partie de la JQuery team) dans son article « Bulletproof @font-face syntax » :

@font-face {
   font-family: 'Graublau Web';
   src: url('GraublauWeb.eot');
   src: local('☺'),
   url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Pour avoir des explications complètes, je te conseille fortement l’article présenté ci-dessus. On voit bien qu’il faut posséder la typo dans différents formats (eot, woff, ttf) pour que @font-face fonctionne partout.

Et c’est là qu’intervient le site FontSquirrel et son « @font-face generator kit ». A partir de l’upload d’une typo (j’ai testé avec une .ttf), il la convertit dans les formats qui nous intéressent, prépare une page de démo avec le CSS qui va bien et, enfin, propose de télécharger une archive de tout ça ! J’ai fait le test avec un typo que j’avais et tu peux voir le fichier de démo de FontSquirrel.

Cela ouvre quand même de belles perspectives, tant que ça ne part pas dans tous les sens. J’ai d’ailleurs décidé d’utiliser cette technique pour le prochaine re-design du blog (coming soon).

Ce contenu a été publié dans HTML / CSS, avec comme mot(s)-clé(s) , . Vous pouvez le mettre en favoris avec ce permalien.

3 reponses a Utilisation de @font-face pour utiliser n’importe quelle typographie en web

  1. Ping : @Font-face : eot, woff, ttf !! | KubX

  2. Ping : Refonte du design du blog (again ?!) | JQuery, PHP, html, design… // arnaud-k : un blog de geek

  3. kawelo dit :

    Bonjour,
    je vous recommande l’utilisation de Google Font : beaucoup de choix de police et une installation vraiment très légère, plus simple encore qu’avec @font-face et FontSquirell !
    En tout cas, toutes mes félicitations pour votre blog qui est très intéressant, bien que je me demande s’il est encore actif ^^

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *