Optimiser le chargement des polices de caractères sur le web

Les polices de caractères sur le web

Avant de commencer la mise en place de polices de caractères sur votre site web, il est important de savoir qu'il existe différents formats de polices, permettant d’avoir un rendu uniforme sur tous les navigateurs web. Ainsi, si vous faites le choix d’une police particulière, il vous faut inclure plusieurs fichiers pour qu’elle soit prise en compte sur chacun de ces navigateurs.

Les formats des polices de caractères sur le web

Chaque navigateur web est compatible avec un ou plusieurs formats de police de caractères. 

• Le format TTF (TrueType Fonts) est l’un des plus anciens formats de police web. Il est compatible avec la majorité des navigateurs web mais n’étant pas compressé, il est souvent assez lourd et peut donc provoquer des lenteurs au niveau du chargement des pages de votre site. 
  Voir la compatibilité avec les navigateurs
• Le format OTF (OpenType Fonts) est également largement compatible avec les navigateurs web. C’est tout simplement une évolution du format TTF, comportant plus de caractères. Il a malheureusement le même désavantage que son prédécesseur, il n’est pas compressé et peut donc s’avérer assez lourd.
  Voir la compatibilité avec les navigateurs
• Le format EOT (Embedded OpenType Fonts) est une version compressée du format OTF. Initialement créé pour le navigateur Internet Explorer, il n’est plus beaucoup utilisé sur les sites web actuels.
  Voir la compatibilité avec les navigateurs
• Les formats WOFF / WOFF2 (Web Open Font Format) sont basés sur les formats TTF et OTF mais spécialement adaptés au web (avec plus de méta-données que les autres formats) et compressés. Il permettent d’avoir un chargement et un affichage plus rapides des polices de caractères et sont clairement devenus des standards.
  Voir la compatibilité du format WOFF avec les navigateurs
  Voir la compatibilité du format WOFF2 avec les navigateurs
• Le format SVG (Scalable Vector Graphics Font) est très léger et utilise le format de police vectorielle. Son poids lui permet de se charger très rapidement pour un rendu facilité sur les appareils disposant de moins de ressources (comme les mobiles par exemple, notamment IOS).
  Voir la compatibilité avec les navigateurs

Nos recommandations quant à l’utilisation de polices de caractères

Dans la plupart des sites web, on privilégie une à deux polices maximum pour l’uniformité, mais aussi pour ne pas impacter négativement les temps le chargement et la performance du site. En effet, lorsqu’il affiche une page, un navigateur doit récupérer l’intégralité des fichiers correspondant aux polices de caractères, en plus des fichiers de style (CSS) et Javascript. Autrement dit, plus il y a de polices de caractères, plus il y a de fichiers à charger et plus la page mettra de temps à s’afficher.

Importer des polices de caractères sur son site

Utiliser la balise @font-face pour importer une police

Lorsqu’on utilise une polices de caractères personnalisée, on la déclare via la règle CSS @font-face qui permet d’indiquer aux navigateurs son nom, le dossier dans lequel elle se trouve et les indications sur son apparence (graisse, italique, etc.). A chaque variation de la police correspond une déclaration dans la feuille de style de votre projet.

Voici une déclaration simple de police de caractères personnalisée :

        // Pacifico
@font-face {
  font-family: 'Pacifico';
  src: url("../../fonts/pacifico/Pacifico-Regular.woff2") format('woff2'),
  url("../../fonts/pacifico/Pacifico-Regular.woff") format('woff'),
  url('../../fonts/pacifico/Pacifico-Regular.ttf') format('truetype'),
  url('../../fonts/pacifico/Pacifico-Regular.eot'),
  url('../../fonts/pacifico/Pacifico-Regular.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/pacifico/Pacifico-Regular.svg#Pacifico-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
    

Les astuces pour optimiser le chargement d’une police via la propriété CSS @font-face

L’ordre d’appel des formats de polices

La première optimisation que l’on peut faire pour réduire le temps de chargement d'une police de caractères  est tout simplement de placer les formats les plus performants et compatibles avec un maximum de navigateurs en premier dans la déclaration @font-face. Les navigateurs lisent les feuilles de styles en cascade (CSS) de haut en bas, ils chargeront donc en premier les formats les plus largement utilisés et n’auront potentiellement pas besoin de charger les autres s’ils ne les utilisent pas. C'est ce que nous avons fait dans l'exemple précédent.

Appeler une police locale

Maintenant que l’on a déclaré notre police, on peut demander aux navigateurs d’aller voir si l’utilisateur a déjà cette police sur son ordinateur.  Cela permettra tout simplement au navigateur d’éviter de télécharger les fichiers des polices dont il a besoin sur le serveur. Elles apparaîtront ainsi automatiquement si l’utilisateur en dispose déjà. On place donc la propriété local(‘’) juste avant les URLs de notre police.

        /* Pacifico */
@font-face {
  font-family: 'Pacifico';
  src: local('Pacifico'),
  url("../../fonts/pacifico/Pacifico-Regular.woff2") format('woff2'),
  url("../../fonts/pacifico/Pacifico-Regular.woff") format('woff'),
  url('../../fonts/pacifico/Pacifico-Regular.ttf') format('truetype'),
  url('../../fonts/pacifico/Pacifico-Regular.eot'),
  url('../../fonts/pacifico/Pacifico-Regular.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/pacifico/Pacifico-Regular.svg#Pacifico-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
    

Afficher le texte dans le navigateur même si la police n’est pas chargée

Les fichiers des polices de caractères peuvent parfois être lourds et donc longs à charger par les navigateurs. Certains d’entre eux n’affichent le texte présent sur une page qu’une fois que les polices sont chargées, ce qui peut provoquer un effet de page « vide » car le texte est alors invisible.

Pour palier à ce problème, on peut ajouter la propriété font-display, afin d’indiquer aux navigateurs le comportement à adopter concernant le chargement des polices. Il existe plusieurs valeurs pour cette propriété, qui vont entraîner des comportements différents : 

• auto : c’est la valeur par défaut, dans ce cas le navigateur fait comme il a souhaite.
• block : le navigateur cache le texte de la page tant que la police n’est pas chargée.
• swap : le navigateur affiche les textes de la page via une police alternative jusqu’à ce que la police demandée soit chargée complètement.
• fallback : le navigateur va tout d’abord masquer le texte de la page sur une environ 100ms, puis affiche une police alternative. Ensuite, il essaie de charger la police demandée et si celle-ci met trop de temps à se charger ou ne se charge pas, elle conserve la police alternative.
• optional : le navigateur cache tout d’abord le texte sur une période courte, le temps de charger la police de caractères demandée. Il choisit de lancer ou non le téléchargement de celle-ci, suivant s’il considère que la connexion est bonne ou trop basse.

        /* Pacifico */
@font-face {
  font-family: 'Pacifico';
  font-display: swap;
  src: local('Pacifico'),
  url("../../fonts/pacifico/Pacifico-Regular.woff2") format('woff2'),
  url("../../fonts/pacifico/Pacifico-Regular.woff") format('woff'),
  url('../../fonts/pacifico/Pacifico-Regular.ttf') format('truetype'),
  url('../../fonts/pacifico/Pacifico-Regular.eot'),
  url('../../fonts/pacifico/Pacifico-Regular.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/pacifico/Pacifico-Regular.svg#Pacifico-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
    

Afficher uniquement les caractères nécessaires aux langues de votre site

La dernière astuce pour optimiser le chargement des polices de caractères via la propriété CSS @font-face consiste à ne charger que les caractères qui sont utilisés dans les langues de votre site web. Dans ce cas, on utilisera la propriété unicode-range pour définir des intervalles de caractères à charger. 

La valeur attribuée à cette propriété peut prendre différents aspects :

• Un seul caractères (ex:  unicode-range: U+26;)
• Un intervalle spécifique de caractères (ex:  unicode-range: U+0025-00FF;)
• Un intervalle un substitution indiqué par un point d’interrogation (ex:  unicode-range: U+4??;). Chaque « ? » représente un intervalle (ici, les deux points d’interrogation permettent de représenter tous les caractères présents entre  U+400 et U+4FF).

        /* Pacifico */
@font-face {
  font-family: 'Pacifico';
  font-display: swap;
  src: local('Pacifico'),
  url("../../fonts/pacifico/Pacifico-Regular.woff2") format('woff2'),
  url("../../fonts/pacifico/Pacifico-Regular.woff") format('woff'),
  url('../../fonts/pacifico/Pacifico-Regular.ttf') format('truetype'),
  url('../../fonts/pacifico/Pacifico-Regular.eot'),
  url('../../fonts/pacifico/Pacifico-Regular.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/pacifico/Pacifico-Regular.svg#Pacifico-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
    

Pré-charger les polices de caractères

es optimisations côté CSS étant faites, il existe un dernier moyen de charger plus rapidement les polices de caractères sur un site, en les appelant une par une dans le <head></head> de votre page HTML et en demandant aux navigateurs de les pré-charger avant les autres éléments du site.

        <head>
    <link rel="preload" as="font" href="../../fonts/pacifico/Pacifico-Regular.woff2" crossorigin>
</head>
    

Prenez soin d’appeler chaque fichier correspondant à votre police un par un séparément.