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.

4 commentaires

gravatar
Anon a dit :

Excellent, je connaissais pas.

Par contre, a part quelques exceptions comme Roboto,
je pense pas que ça soit extrêmement efficace dans le sens ou très peu de gens en dehors du graphisme installent des polices sur leur système.


Du coup je me pose une question : elles sont pas mises en caches les fonts web ?
Je vais vérifier. Si c'est le cas, je vois pas trop l'utilité de local() du coup.

gravatar
Le Hollandais Volant a dit :

@Anon : si, elles sont en cache. Mais le cache est limité.

Et y'a pas juste le telechargerment. Le rendu est aussi bien plus rapide quand les polices sont en local.

gravatar
Remb a dit :

Merci pour cet article, je n'avais jamais pris le temps de comprendre 'local(...)'.

J'ai cependant lu que pour les sites professionnels c'était déconseillé. En effet une police peut avoir le meme nom en local mais etre différente, ou seulement partielle et ne contenir que les principaux caracteres.
Reste a savoir si ce genre de cas apparais souvent.

gravatar
Alain Ternaute a dit :

Merci bien pour l'info !

Mais on peut pas déjà faire sensiblement la même chose ?
Par exemple, j'importe la font Times New Roman, puis je lui donne un nom différent (par exemple "goodserif").
@font-face {
font-family: "goodserif";
font-style: normal;
font-weight: 400;
src: url("tnroman.woff") format("woff");
}

Et dans mon css, j'applique mes règles comme ceci :
font-family: goodserif,"Times New Roman";
Ça fait pas le même job ?

Les commentaires sont fermés pour cet article