Dans mon précédent article j’ai abordé le sujet des polices et de leur fonctionnement. J’avais laissé de côté la syntaxe de @font-face, déjà expliquée à divers endroits sur la toile. Mais si la plupart des articles présentent l’utilisation d’une police, on voit rarement comment faire dans la cas de plusieurs variante d’une police: en italique, en gras, plus fin… Nous allons corriger le tir et voir quelle est la syntaxe la plus adaptée.

La syntaxe de base

Pour reprendre la syntaxe proposée par Paul Irish:

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

Et quand on a la même police en gras par exemple, on voit souvent:

@font-face {
font-family: 'Graublau Web Bold';
src: url('GraublauWebBold.eot?') format('eot'), url('GraublauWebBold.woff') format('woff'), url('GraublauWebBold.ttf') format('truetype');
}

Et dans notre CSS on écrit alors:

p {
font-family: 'Graublau Web';
}
h1, h2 {
font-family: 'Graublau Web Bold';
}

Sauf que là, on se retrouve confronté à un problème sur certains navigateurs. Par défaut les h1, h2 sont en gras, et ont donc un font-weight: bold. Comme notre police est « normale » pour le navigateur, ça arrive qu’on se retrouve avec un double bold: celui de la police, et celui du navigateur.

Il suffirait alors d’écrire:

h1, h2 {
font-family: 'Graublau Web Bold';
font-weight: normal;
}

Ok, mais là, le code devient moche et on est loin d’utiliser les font-face comme il faut! Voici…

la bonne syntaxe

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

@font-face {
font-family: 'Graublau Web';
src: url('GraublauWebBold.eot?') format('eot'), url('GraublauWebBold.woff') format('woff'), url('GraublauWebBold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

p, h1, h2 {
font-family: 'Graublau Web';
}

h1, h2 {
font-weight: bold;
}

On utilise le même nom de font-family, et on change les attributs d’emphase et de graisse de la police.
La syntaxe est au final plus claire, avec un seul nom de police. Ca évite également les soucis de double bold. En bref, c’est comme ça qu’il faut faire.

Conseil supplémentaire 1

Le code CSS est là à titre d’exemple. En sass ou less ou peut mettre le nom de la police dans une variable, et pour la font-family il vaut mieux déclarer:

p, h1, h2 {
font-family: 'Graublau Web', 'Times New Roman', Times, serif;
}

ou

p, h1, h2 {
font-family: 'Graublau Web', Arial, Helvetica, sans-serif;
}

Suivant l’effet souhaité, au cas où votre police ne soit pas interprétée, on prévoit une police de remplacement en serif ou sans-serif reconnue sur les différents systèmes d’exploitation.

Conseil supplémentaire 2

Dans l’exemple j’ai utilisé des h1, h2. Mais en pratique il vaut mieux utiliser des classes .title, .subtitle par exemple. Avec les demandes de SEO il est possible de devoir changer les h1, h2 plus tard dans le projet, il vaut mieux utiliser des classes que les éléments directement.