Utilisation CSS de @font-face avec OpenType

Mise en situation : le designer d'une maquette de site web est celui qui possède généralement le plus de fonts installées sur son poste de travail. L'intégrateur reproduit le visuel en tentant de respecter au maximim la vision artistique du designer, en prenant soin de spécifier la font utilisée pour l'affichage du texte. Une fois le tout en ligne, le client se plaint qu'il ne voit pas les caractères correctement suivant ce qui avait été présenté. C'est qu'il n'a pas cette police spéciale installée sur son ordinateur.

Si vous rêvez d'intégrer n'importe quelle font à votre site web tout en étant certain que tous la verront, vous devez exploiter le truc @font-face en CSS avec les fonts TrueType (.TTF), OpenType (.OTF) et Web Open Font Format (WOFF).

Choisissez une font à votre goût sur un site tel que OpenFontLibrary ou Font Squirrel, téléchargez le fichier compressé qui contient le ou les différents formats. Certaines fonts sont payantes alors que d'autres sont gratuites pour usage commercial. Pour mon exemple, j'ai choisi Days en OTF.

Dans votre projet web, il est conseillé de conserver les différentes fonts en les organisant sous une arborescence logique comme : /css/fonts/Days/Days.otf.

Dans votre feuille de style CSS :

@font-face {
   font-family: "Days";
   src:
       local("Days"),
       local("Days alternatif"),
       url(fonts/Days/Days.otf);
}

Le fureteur cherchera d'abord localement sur l'ordinateur à un ou plusieurs endroits spécifiés (on peut ajouter plusieurs références de noms alternatifs avec local) et s'il ne le trouve pas, il utilisera l'URL pour la récupérer.

Pour y faire référence, on utilisera le nom indiqué dans font-family de @font-face indiqué plus haut. Ensuite, on l'appliquera à nos éléments par CSS :

h1{
   font-family: Days, Verdana, Arial;
   font-size: 18px;
}

h2{
   font-family: Days, Verdana, Arial;
   font-size: 16px;
}

Voici un aperçu du résultat :



Le problème, c'est que les fonts avec les accents pour du texte français sont plus rares. Comme dans l'exemple ci-dessus, "à l'usage" est transformé en "a l'usage" en retirant l'accent. C'est à considérer lors du choix de la font.

Fait étonnant, OpenType a été développé par Microsoft et est supporté depuis IE 4 alors que les autres fureteurs n'ont été compatibles que très récemment.

Enfin, quelques ressources pour poursuivre votre exploration :

• @font-face sur Mozilla developer center
  
• un générateur de kit font-face
• un bon tutoriel sur l'utilisation de font-face