PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

[CSS] Optimiser le chargement des polices pour le web

mardi 17 novembre 2015 à 21:09
Quand on inclut un fichier de police en CSS dans sa page web (par exemple la police "roboto"), on fait quelque chose comme ça pour la déclarer :

@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 400;
  src: url("roboto.woff") format("woff");
}

Puis ceci pour l’utiliser :

p {
  font-family: roboto, sans-serif;
}

C’est bien comme ça qu’il faut faire.
Mais qu’en est t-il du cas où la police du même nom est présente sur l’ordinateur de l’internaute ? Il se passe quoi ?

Le navigateur doit choisir entre télécharger la police "roboto" du web ou utiliser la police "roboto" sur l’ordinateur.
Dans les faits, il se trouve que le navigateur télécharge la police du web : la déclaration de la police avec le nom "roboto" remplace en fait le nom "roboto" dans la liste des polices sur l’ordinateur.

Autrement dit, à chaque fois que l’internaute qui a déjà la police d’installée arrive sur votre site, il doit télécharger la police en question. Ce n’est pas optimal.

La solution ? Déclarer le nom possible qu’aurait la police sur l’ordinateur avec « local() » :

@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 400;
  src: local("roboto"), local("roboto-regular"), url("roboto.woff") format("woff");
}

Notez que si vous aviez ses variantes, comme celui en « font-weight: 300 » ou « 700 », vous devez spécifier la noms de polices spécifiques, dans ce cas précis « roboto-light » et « roboto bold ».

De cette façon, si la police Roboto est installée sur l’ordinateur, elle se utilisée et ça s’arrête là. Si elle n’est pas installée, alors la police va être chargée par le navigateur.
On peut donc gagner pas mal en temps de chargement pour une partie des visiteurs.

Dans le cas de Roboto, c’est une police faite par Google et utilisée dans le cadre du material-design. Elle est également intégrée nativement sur Android. Si votre site utilise cette police et que vous utilisez la méthode écrite ci-dessus, alors il sera rapide sur n’importe quel appareil Android (ce qui n’est pas non plus sans importances, vu que de plus en plus de requêtes sont faites depuis des appareils mobiles, majoritairement sous Android).

Enfin, si la police Roboto est installée sur l’ordinateur de votre visiteur sous un autre nom, ça ne fonctionnera pas et elle sera téléchargée quand même.
Je conseille donc, que ce soit lors de l’usage d’une police sur le web ou de l’installation sur votre ordinateur, de toujours utiliser le nom original de la police : vous accélérez alors potentiellement la navigation de vos lecteurs ainsi que la votre, tout en hiérarchisant au mieux la gestion des polices d’écritures : ceux du système avant ceux du web.