Auto-héberger ses polices web : pourquoi et comment

Quand on monte un site, ajouter une belle police prend trente secondes : on copie une balise <link> vers fonts.googleapis.com et c'est réglé. C'est le réflexe par défaut. C'est aussi, à mon avis, l'un des plus mauvais réflexes du web moderne. Sur les sites que je construis, je n'ai pas une seule police chargée depuis Google. Voici pourquoi, et comment je m'y prends.

Le vrai problème : vos visiteurs passent par Google

Une police chargée depuis le CDN de Google n'est pas un simple fichier. Pour aller la chercher, le navigateur de chaque visiteur ouvre une connexion vers les serveurs de Google et leur transmet son adresse IP. Personne n'a rien demandé, rien accepté.

Ce n'est pas une vue de l'esprit. En janvier 2022, le tribunal régional de Munich a condamné l'exploitant d'un site à verser 100 € de dommages à un visiteur, justement parce que le site transmettait son IP à Google via Google Fonts, sans consentement (affaire 3 O 17493/20). Le tribunal a rappelé qu'une adresse IP est une donnée personnelle au sens du RGPD — et, fait notable, il a explicitement cité l'auto-hébergement des polices comme la solution : installées sur votre propre serveur, aucune donnée ne part chez Google.

Depuis, une vague de mises en demeure a visé des sites français et allemands sur ce seul motif. Auto-héberger, ce n'est pas de la paranoïa : c'est se mettre en conformité par construction, sans bandeau de consentement supplémentaire.

L'autre raison : la vitesse

Même sans la question des données, charger une police chez un tiers coûte cher en performance. Avant même de télécharger le fichier, le navigateur doit résoudre un nouveau nom de domaine, ouvrir une connexion et négocier le chiffrement avec fonts.gstatic.com. Autant d'allers-retours réseau pendant lesquels le texte attend pour s'afficher.

Quand la police vit sur le même domaine que le reste du site, il n'y a rien de tout ça : la connexion est déjà ouverte, le fichier arrive avec le reste. Sur un site statique pensé pour aller vite, c'est exactement le genre de détail qui fait gagner des centaines de millisecondes au premier affichage.

Comment je fais, concrètement

La méthode tient en cinq étapes, et elle est valable pour n'importe quelle police libre.

Récupérer les fichiers woff2. C'est le seul format dont on a besoin aujourd'hui : il est compressé et supporté par tous les navigateurs modernes. Inutile de s'encombrer des vieux formats.
Sous-ensembler aux caractères utiles. Une police complète embarque le cyrillique, le grec, le vietnamien… Si le site est en français et anglais, je ne garde que le sous-ensemble latin (et latin-ext au besoin). Le fichier fond de plusieurs centaines de kilo-octets à quelques dizaines.
Déclarer les @font-face en local. Je place les woff2 dans un dossier /fonts et je les déclare dans une petite feuille fonts.css :

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

font-display: swap affiche tout de suite le texte avec une police système, puis bascule sur la vôtre une fois chargée. Pas d'écran blanc.

Précharger la police critique. Un <link rel="preload" as="font" type="font/woff2" crossorigin> dans le <head> indique au navigateur de récupérer la police principale au plus tôt.
Supprimer tout lien vers Google. Dernière étape, la plus importante : retirer chaque balise pointant vers googleapis.com ou gstatic.com, puis vérifier dans l'onglet réseau des outils de développement qu'il ne reste aucune requête vers Google. Zéro. C'est le seul contrôle qui compte.

Ce que ça change

Le résultat est sobre mais net : plus aucune donnée de vos visiteurs ne part vers un tiers, le site se conforme au RGPD sans rustine, et le texte s'affiche plus vite parce qu'il n'attend plus une connexion externe. En prime, vos polices ne dépendent plus de la disponibilité d'un service tiers — elles sont à vous.

Sur ce blog, tout est auto-hébergé dans cet esprit : pas une requête ne s'échappe vers Google pour afficher ces lignes. Ça demande dix minutes de mise en place une fois, et plus jamais on n'y repense.

Envie d'un site rapide et propre sur ce point comme sur les autres ? Parlons-en.