Font SquirrelPour ceux ne connaissant pas cette technique, les règles CSS « @font-face » permettent d’utiliser des polices de caractères non-standards pour l’affichage des textes d’une page web. Pour une explication en profondeur je vous recommande cet excellent article de Paul IrishBulletproof @font-face syntax.

Bref, la plupart des utilisateurs de cette technique vont se retrouver un jour ou l’autre sur le très pratique générateur automatique du site web Font Squirrel : ce service gratuit, qui fonctionnent très bien en passant, transforme une police de votre choix en un « kit » complet et surtout prêt à être intégrer sur le champs dans votre projet, feuille de styles incluse.

Mais là où il y a un petit « hips », c’est justement au niveau de la feuille de style générée. En effet, les différentes déclinaison de la même police (italique, gras, etc.) portent toutes un nom différent, ce qui donne des règles CSS dans le genre de ce qu’il y a ci-dessous :

 

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSerifItalic';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSerifBold';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Et ainsi de suite...

 

Ce qui n’est pas vraiment pratique : par exemple pour afficher correctement une partie de phrase en gras avec l’utilisation de la balise <strong>, vous devrez ajouter des règles de ce genre à votre feuille de styles :

 

p {
    font-family: 'DroidSerifRegular';
}

p strong {
    font-family: 'DroidSerifBold';
}

 

Le truc? Modifier les règles fournies par Font Squirrel. C’est très simple : l’astuce consiste à donner un nom commun à toutes les polices d’une même famille et de les différencier judicieusement avec les propriétés font-weight et font-style, tout simplement. Donc, si on reprend le premier exemple donné plus haut sur cette page, le code devrait plutôt ressembler à quelque chose dans le style de  :

 

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Et ainsi de suite...

 

De cette manière, l’intégration de polices de caractères se fait de façon beaucoup plus pratique et transparente. Bonne expérimentation!

 

 

 

Commenter