La typographie donne une grande partie de sa personnalité à un site. Pour en profiter, beaucoup de sites chargent leurs polices directement depuis les serveurs de google fonts ou d'un autre service en ligne : c'est simple, mais ce n'est ni le plus rapide, ni le plus sûr juridiquement. Les polices auto-hébergées, c'est-à-dire servies depuis votre propre serveur, règlent ces deux problèmes à la fois. Voici pourquoi et comment faire la transition.
Le problème des polices chargées depuis un service tiers
Un enjeu RGPD bien réel
Quand une page charge une police depuis les serveurs de Google, le navigateur du visiteur se connecte à ces serveurs et leur transmet son adresse IP, qui est une donnée personnelle. En janvier 2022, le tribunal régional de Munich a condamné l'exploitant d'un site à verser 100 euros de dommages et intérêts à un internaute pour ce motif, l'adresse IP ayant été transmise à Google sans son consentement (LG München I, 20 janvier 2022, 3 O 17493/20). La décision a été suivie, en Allemagne, d'une vague de courriers de mise en demeure adressés aux éditeurs de sites.
En France, la CNIL considère elle aussi que le transfert de données vers des services tiers doit reposer sur une base légale. Le plus simple reste de ne rien transférer du tout. Pour le cadre général, voir mon guide sur la conformité RGPD d'un site.
Plus de cache partagé entre les sites
L'argument historique en faveur des CDN de polices était le cache partagé : un visiteur qui avait déjà téléchargé « Roboto » sur un autre site ne la retéléchargeait pas. Ce n'est plus vrai. Pour des raisons de confidentialité, les navigateurs isolent désormais leur cache par site depuis plusieurs années : Chrome depuis la version 86, comme l'explique cet article de Chrome for Developers. Chaque site retélécharge donc la police, en ajoutant au passage une connexion vers un domaine tiers.
Une connexion supplémentaire sur le chemin critique
Pour afficher le texte, le navigateur doit d'abord télécharger la feuille de style de Google, puis découvrir l'adresse du fichier de police, ouvrir une connexion vers un second domaine, et enfin télécharger la police. Toutes ces étapes retardent l'affichage du texte, et donc souvent le LCP.
Passer aux polices auto-hébergées
Étape 1 : récupérer les fichiers au format WOFF2
Le format WOFF2 est compressé et reconnu par tous les navigateurs actuels : c'est le seul dont vous avez besoin. Les polices de Google Fonts sont publiées sous licence libre (le plus souvent SIL Open Font License), ce qui autorise leur hébergement sur votre serveur. Vérifiez toujours la licence d'une police commerciale avant de la servir vous-même.
Étape 2 : ne garder que le nécessaire
Chaque graisse et chaque style est un fichier supplémentaire. Interrogez-vous : avez-vous vraiment besoin du 300, du 400, du 500, du 600, du 700 et de leurs italiques ? Deux ou trois fichiers suffisent pour la plupart des sites.
Deux techniques réduisent encore le poids :
- Les polices variables : un seul fichier contient toutes les graisses, souvent plus léger que trois fichiers statiques ;
- Le sous-ensemble de caractères (subsetting) : pour un site en français, le jeu « latin » suffit. Inutile d'embarquer les caractères cyrilliques ou grecs.
Étape 3 : déclarer les polices en CSS
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-variable-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
La propriété font-display: swap affiche immédiatement le texte avec une police système, puis la remplace dès que la police personnalisée est disponible. Le texte n'est jamais invisible.
Étape 4 : précharger la police principale
<link rel="preload" href="/fonts/inter-variable-latin.woff2" as="font" type="font/woff2" crossorigin>
Ne préchargez que la police utilisée dans le premier écran, généralement celle du texte courant ou des titres. Précharger toutes les polices encombrerait la bande passante au détriment des autres ressources. L'attribut crossorigin est obligatoire pour les polices, même servies depuis votre propre domaine.
Éviter le décalage au changement de police
Avec font-display: swap, le remplacement de la police système par la police personnalisée peut faire « sauter » le texte si les deux n'ont pas les mêmes proportions : c'est du CLS. Les descripteurs size-adjust, ascent-override et descent-override permettent d'ajuster la police de secours pour qu'elle occupe le même espace :
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
size-adjust: 107%;
ascent-override: 90%;
}
body {
font-family: 'Inter', 'Inter Fallback', sans-serif;
}
Les valeurs exactes dépendent de la police : certains outils en ligne les calculent automatiquement. Ce réglage aide à garder un CLS proche de zéro, indispensable pour de bons Core Web Vitals.
Mettre les polices en cache longtemps
Les fichiers de police ne changent pratiquement jamais. Servez-les avec un en-tête de cache HTTP d'un an, en ajoutant un numéro de version dans le nom du fichier si vous devez un jour les remplacer.
Et pourquoi pas les polices système ?
Pour un back-office ou un outil interne, une pile de polices système (system-ui) est imbattable : aucun fichier à télécharger et un rendu familier pour l'utilisateur. Pour un site vitrine, une police personnalisée bien choisie renforce l'identité visuelle ; mon guide des associations de polices vous aidera à la choisir.
Sur tous les sites que je réalise, les polices sont auto-hébergées, réduites au strict nécessaire et préchargées : c'est l'un des ingrédients d'un score Lighthouse de 100. Si votre site charge encore ses polices depuis un service tiers, je peux faire la migration : voir mes services.
