État des lieux des polices

Article écrit par Victor Darras

Bonjour à tous, aujourd’hui j’aimerais revenir sur une notion centrale du webdesign, les polices. Parfois ignorées (oui je te vois dans le fond, jeune intégrateur impétueux que Google Fonts rend heureux), souvent incomprises, la gestion des polices peut paraître fastidieuse, mais c’est en fait assez simple.

Précision avant d’attaquer le sujet : une police d’écriture est constituée d’un ensemble de fontes (ex : Arial Bold, Italique en 12pt est une fonte).

Comme vous le savez sûrement, il est depuis quelques années admis que nous pouvons faire télécharger et afficher n’importe quelle police de caractères à l’utilisateur par le biais de son navigateur. Avant cela, nous devions nous assurer d’utiliser des polices généralistes trouvables sur la plupart des systèmes du marché. Nous continuerons à les utiliser en cas de fichier introuvable, ou de fallback pour quelques caractères spéciaux par exemple.

@font-face

Pour déclarer l’utilisation d’un fichier de fonte, nous utiliserons la directive (ou @-rule) @font-face. Comme toutes les règles en @, @font-face permet de configurer nos CSS.

@font-face {   font-family: "Open Sans";   src:     url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),     url("/fonts/OpenSans-Regular-webfont.woff")  format("woff"); } 

Généralement on trouvera dans un premier temps la propriété font-family qui nomme la police liée avec la propriété src afin de pouvoir les réutiliser dans le reste des CSS. Avec cette seconde propriété nous pouvons lister l’ensemble des fichiers requis pour assurer la compatibilité avec les différents navigateurs.

Nous aurons probablement besoin de fontes différentes de cette même police, mais il nous faudra déclarer pour chaque style un ensemble de fichiers correspondants. Nous aurons donc besoin d’ajouter les propriétés font-weight et font-style :

@font-face {   font-family: "Open Sans";   font-style: italic;   font-weight: bold;   src: url("/fonts/OpenSans-Bold-Italic-webfont.woff2") format("woff2"); } 

Il est aussi possible de rechercher sur le système de l’utilisateur un fichier de fonte correspondant, avec la valeur local() :

@font-face {   font-family: "Open Sans";   src:     local('Open Sans Regular'),     local('OpenSans-Regular'),     url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"); } 

À savoir, nous pouvons définir un ensemble de caractères concernés par cette déclaration @font-face, afin de contrôler plus finement le rendu de notre page.

Compatibilité : woff, ttf, otf, WTF ?

Un petit retour sur les formats de fichier pris en charge par nos navigateurs :

• .woff2 : Edge, Firefox, Safari et Chrome dans leurs dernières versions.
• .woff et .ttf/.otf : Permettent la compatibilité jusqu’à IE9 sans grande difficulté.

Je passe sur les formats plus obscurs, destinés à des navigateurs en perdition…

Acquérir les bons formats de fontes

Si vous n’avez en votre possession qu’un des nombreux formats de fonte, ou alors que vous n’avez su récupérer la version Web (dont le rendu sur écran a été spécifiquement pensé), je vous invite à utiliser ce générateur de webfonts

Ne pas confondre avec font-family

Comme vous l’avez probablement déjà remarqué nous pouvons donc avoir deux utilisations des règles de fontes, pour la déclaration, ou l’utilisation. Ainsi, après avoir déclaré « Open Sans » plus haut nous pouvons nous servir du même nom dans les CSS :

body {   font-family: "Open Sans", sans-serif; /* sans oublier le fallback */   font-style: italic;   font-weight: bold; } 

Un raccourci font

Un peu risqué à utiliser (de mon point de vue) du fait de la dépendance forte à l’ordre des arguments, il est quand même indispensable de connaître l’alternative courte à la déclaration de fonte.

body {   font: normal small-caps normal 16px/1.4 Georgia; }  /* équivaut au code suivant : */  body {   font-family: Georgia;   line-height: 1.4;   font-weight: normal;   font-stretch: normal;   font-variant: small-caps;   font-size: 16px; } 

De la même manière que pour background ou border, font est un raccourci pour définir un ensemble de règles relatives aux fontes. Important à savoir, seules les valeurs de font-size et de font-family sont obligatoires dans ce raccourci. Pour différencier font-size et line-height, il sera aussi nécessaire de les séparer par un /

Décomposons un peu plus les valeurs les plus singulières :

• font-variant permet de faire appel à des fonctionnalités avancées de ladite police grâce à font-variant-caps ou font-variant-ligature par exemple pour gérer les capitales ou les ligatures.
• font-stretch permet de choisir dans la police concernée l’alternative (fonte) correspondant à la largeur de police, condensed ou expanded par exemple.
• font-weight quant à elle permet de sélectionner la graisse la plus proche parmi celles rendues disponibles grâce à @font-face.

Une nouvelle ère

Comme je le disais en début d’article, il est aujourd’hui beaucoup plus facile de gérer à la main nos propres polices. Il est donc temps de supprimer les appels aux CDNs de Google (un exemple parmi tant d’autres) pour récupérer «Open Sans», et éviter ainsi de se rendre dépendant de services externes tout en offrant gracieusement des informations sur chacun de vos utilisateurs aux régies publicitaires.