Dans l’enfer de @font-face

L’utilisation de fontes personnalisées a explosé ces dernières années sur le web grâce à la déclaration CSS @font-face, dont l’utilisation a été rendue simple par des sites tels que FontSquirrel et son désormais célèbre webfont generator. Pourtant, la méthode proposée ne me paraît pas idéale.

Si l’on reprend l’exemple de FontSquirrel, le code généré par le kit téléchargé est le suivant :

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

Lorsque l’on veut définir différents types de cette police, on spécifie une @font-face propre à chacun (merriweather-italic, merriweather-bold etc.). Puis dans notre CSS, par exemple :

strong {
  font-family: merriweather-bold, Serif;
  font-weight: normal;
}

Le hic avec cette façon de faire, c’est qu’en cas d’impossibilité pour le navigateur d’afficher les fontes personnalisées, la police de fallback s’affichera sans italique ou sans gras.

Une autre solution ?

En fouillant un peu, j’ai trouvé cette solution, bien plus intéressante car elle évitera la suppression ou le passage en faux (c’est-à-dire simulé par le navigateur) des styles italiques et gras :

@font-face {
  font-family: 'Whatever';
  src: url('whatever.eot');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Whatever';
  src: url('whatever-italic.eot');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Whatever';
  src: url('whatever-bold.eot');
  font-weight: bold;
  font-style: normal;
}

On utilise un seul nom unique de font-family pour toutes nos @font-face, puis on y applique nos font-weight et font-style désirés. Problème réglé… Du moins sur la plupart des navigateurs.

IE, l’éternel vilain petit canard

Comme d’habitude, là où ça coince, c’est avec Internet Explorer (du moins jusqu’à la version 8). La raison, c’est que ce cher IE ne prend pas en compte font-style et font-weight dans la déclaration @font-face (source).

Pour contourner le problème, il va falloir avoir recours aux commentaires conditionnels et une feuille de styles séparés pour IE. C’est dans celle-ci qu’on intégrera les polices sur le format proposé par FontSquirrel, avec un nom de font-family par type de police. Problem solved !