Auto-héberger Google Fonts pour améliorer les Core Web Vitals

Auto-héberger Google Fonts pour améliorer les Core Web Vitals

Google Fonts est présent sur 54 % de tous les sites web selon le Web Almanac 2025. La plupart d'entre eux chargent les polices depuis les serveurs de Google. C'est un problème. Chaque requête Google Fonts ajoute des connexions externes, du CSS render blocking et des fichiers de polices impossibles à précharger, mettre en cache ou contrôler. Auto-héberger ces mêmes polices élimine tous ces problèmes et prend environ 10 minutes.

Dernière révision par Arjen Karel en février 2026

Comprendre les Core Web Vitals

Les Core Web Vitals sont trois métriques utilisées par Google comme signaux de classement : le LCP (chargement), l'INP (interactivité) et le CLS (stabilité visuelle). Auto-héberger les polices améliore principalement le LCP et le CLS, et peut aussi améliorer le First Contentful Paint (FCP).

Impact de Google Fonts sur les Core Web Vitals

Google Fonts sert souvent à enrichir la typographie et le design, mais son impact sur les Core Web Vitals peut être lourd, principalement sur le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS).

Pour la plupart des personnes avec qui j'échange, c'est une surprise. Le CDN de Google est censé être le meilleur au monde. Alors pourquoi Google Fonts est-il mauvais pour la vitesse des pages ?

1. L'argument du « cache partagé » est mort. Beaucoup de développeurs pensent encore que la popularité de Google Fonts garantit que la police est déjà en cache chez le visiteur depuis un autre site. C'était vrai avant 2020. Depuis Chrome 86 et Safari (qui le fait depuis 2013), les navigateurs partitionnent leur cache HTTP par domaine de premier niveau. Votre site télécharge donc Google Fonts de zéro pour chaque nouveau visiteur, quels que soient les autres sites consultés. Le gain de performance d'un cache CDN partagé n'existe plus.

2. La feuille de style n'est jamais dans le cache du navigateur pour les nouveaux visiteurs. Premier problème : Google Fonts dépend d'une feuille de style externe hébergée sur fonts.google.com ou fonts.googleapis.com. Cette feuille de style ne peut pas être réutilisée entre plusieurs domaines (contrairement à ce que beaucoup croient). Pour un nouveau visiteur, cette feuille de style render blocking n'est donc jamais servie depuis le cache ultra-rapide du navigateur et ralentit systématiquement le rendu de la page.

3. Cela nécessite 2 connexions vers 2 nouveaux serveurs. Deuxième problème : pour télécharger le fichier CSS et les fichiers de polices, il faut se connecter à 2 serveurs différents. Chaque connexion initiale vers un nouveau serveur génère un surcoût important et prend du temps. Un temps qui aurait pu être économisé en servant les fichiers via la connexion déjà ouverte vers votre serveur. Pour limiter cela, Google conseille d'établir un preconnect vers ses domaines. Cela atténue un peu le problème, mais reste loin d'être parfait

4. Vous avez un contrôle limité sur l'attribut font-display. Google Fonts permet bien de définir l'attribut font-display, mais uniquement de manière globale. Tous les fichiers woff2 reçoivent donc le même réglage de font-display.

5. L'emplacement final du fichier woff2 est inconnu. Par conséquent, vous ne pouvez pas précharger vos polices prioritaires. Les fichiers de polices sont mis en file d'attente de téléchargement relativement tard, ce qui provoque souvent un décalage de mise en page visible causé par le flash of unstyled text (FOUT). Découvrez comment garder le texte visible pendant le chargement des polices web.

6. Vous n'avez aucun contrôle sur les fichiers de polices. Vous ne pouvez pas réduire davantage leur jeu de caractères, vous ne pouvez pas définir des en-têtes de cache de longue durée, et vous ne pouvez pas les servir depuis votre propre CDN.

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Avantages de l'auto-hébergement de Google Fonts

Auto-héberger Google Fonts consiste à servir les fichiers de polices depuis vos propres serveurs au lieu de dépendre des serveurs externes de Google. Cette approche apporte plusieurs avantages :

1. Distribution plus rapide des polices : auto-héberger les polices réduit la dépendance envers des serveurs tiers. Les fichiers sont transmis plus vite, ce qui accélère l'affichage du contenu textuel. Cette amélioration profite directement au LCP en affichant plus vite l'élément de texte principal. Le Web Almanac 2025 montre que l'auto-hébergement progresse : 31,5 % des sites sur ordinateur auto-hébergent désormais exclusivement leurs polices, contre 28 % en 2024.

2. Moins de décalages de mise en page : en auto-hébergeant Google Fonts, vous contrôlez la manière dont la police est chargée et affichée, ce qui minimise le risque de décalages provoqués par un rendu tardif. Cela améliore la stabilité visuelle globale de la page et profite directement au CLS.

3. Contrôle total sur la mise en cache et le préchargement : en auto-hébergeant vos polices, vous connaissez l'URL exacte de chaque fichier. Vous pouvez donc précharger les polices critiques, définir des en-têtes de cache agressifs (un an ou plus) et servir les polices via la même connexion que le reste de la page.

Conformité RGPD

En janvier 2022, le tribunal de Munich a jugé que charger Google Fonts depuis les serveurs de Google enfreint le RGPD, car cela transfère les adresses IP des visiteurs à Google sans leur consentement. L'auto-hébergement élimine complètement ce problème, car aucune donnée n'est envoyée à Google lors du chargement des polices. Si votre site accueille des visiteurs européens, c'est une raison de plus d'auto-héberger.

Bonnes pratiques pour auto-héberger Google Fonts

Pour optimiser vos polices Google Fonts auto-hébergées et améliorer vos Core Web Vitals, appliquez les bonnes pratiques suivantes :

1. Utilisez uniquement le format WOFF2 : WOFF2 offre la meilleure compression (environ 30 % plus léger que WOFF) et bénéficie d'un support navigateur supérieur à 96 %. Le seul navigateur qui ne prend pas en charge WOFF2 est Internet Explorer, dont le support s'est arrêté en juin 2022. Vous n'avez plus besoin de fallback WOFF.

2. Subsetting des polices : pour réduire davantage la taille des fichiers de polices, isolez uniquement les caractères nécessaires au contenu de votre page web. Le chargement des polices sera plus rapide et vos Core Web Vitals s'en trouveront améliorés. Google Fonts découpe déjà ses polices par unicode-range, mais l'auto-hébergement vous permet d'aller plus loin avec des outils comme fonttools.

3. Utilisation stratégique de l'attribut font-display : configurez l'attribut font-display avec soin pour contrôler le rendu du texte pendant le chargement des polices. La valeur « swap » accélère le First Contentful Paint en garantissant l'affichage des polices de fallback jusqu'au chargement complet de la police web. La valeur « optional » supprime tout basculement de police et évite les décalages de mise en page en ne remplaçant jamais la police de fallback. Un dosage judicieux de ces deux valeurs permet souvent d'optimiser à la fois le Cumulative Layout Shift et le First Contentful Paint. D'après le Web Almanac 2025, 50 % des pages utilisent aujourd'hui font-display : swap, mais seulement 0,5 % exploitent font-display : optional, qui est pourtant le meilleur choix pour maximiser les Core Web Vitals sur les polices non critiques.

4. Préchargez les polices : rendez vos polices disponibles le plus tôt possible en préchargeant les polices les plus importantes (1 ou 2 au maximum) via la directive link preload. Incluez toujours l'attribut crossorigin, même pour les polices du même domaine, sinon le navigateur téléchargera la police deux fois. Seules 12 % des pages préchargent leurs polices : c'est un gain rapide et facile.

<link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>

Comment auto-héberger une police Google Fonts (la bonne méthode)

Télécharger et auto-héberger une police Google Fonts prend environ 10 minutes. Pensez toujours à vérifier la licence de la police avant de l'utiliser. La plupart des polices Google Fonts sont disponibles sous la licence SIL Open Font, qui autorise une utilisation gratuite, y compris commerciale.

La méthode la plus rapide consiste à utiliser google-webfonts-helper : cet outil permet de télécharger n'importe quelle police Google Fonts sous forme de fichiers WOFF2 avec le CSS prêt à l'emploi. Si vous préférez le faire manuellement pour bien comprendre chaque étape, suivez ces étapes :

1. Rendez-vous sur le site de Google Fonts à l'adresse fonts.google.com.

2. Sélectionnez la police souhaitée et choisissez les graisses à intégrer.

3. Sur la page de la police, cliquez sur le bouton « Selected families » dans la barre supérieure. Vous y trouverez le lien vers la feuille de style hébergée par Google.

   

4. Copiez l'URL de cette feuille de style et ouvrez-la dans votre navigateur. Vous verrez alors toutes les déclarations font-face disponibles pour cette police.

   

5. Vous remarquerez peut-être qu'il y a plusieurs fichiers woff2, alors que nous n'avons choisi qu'une seule police. C'est parce qu'il existe un fichier de police distinct par plage Unicode (unicode-range). Pour savoir quel fichier télécharger, ajoutez temporairement la feuille de style hébergée par Google à votre site. Utilisez le raccourci Ctrl-Shift-I pour ouvrir les DevTools de Chrome. Rendez-vous dans l'onglet Network et cliquez sur Font. Actualisez la page (Ctrl-R) pour observer quel fichier de police est déclenché au téléchargement.

6. Associez ce nom de fichier au fichier woff2 correspondant dans la feuille de style. Vous savez maintenant quel fichier de police votre site utilise réellement !

7. L'étape suivante consiste à copier l'URL complète de la police et à l'ouvrir dans votre navigateur pour lancer le téléchargement. Copiez ensuite ce fichier sur votre site.

8. Copiez le CSS de la police web identifiée à l'étape 7 et collez-le dans votre feuille de style. N'oubliez pas de remplacer l'URL du CDN Google par celle de votre propre serveur (par exemple « /fonts/inter-400.woff2 »).

9. Préchargez la police (s'il s'agit d'une police visuellement importante).

Vous avez téléchargé et auto-hébergé avec succès la police Google Fonts de votre choix.

Un exemple concret

Voici un exemple complet avec la police Inter, appliquant l'ensemble des bonnes pratiques : préchargement, format WOFF2 exclusif, valeur font-display stratégique et fallback vers les polices système.

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font (crossorigin is required, even for same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Self-hosted Inter font with WOFF2 format */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses Inter with a system-ui fallback.</p>
</body>

Mesurer l'impact

Après être passé aux polices auto-hébergées, vérifiez les gains avec le Real User Monitoring. Dans nos données CoreDash, les sites qui auto-hébergent leurs polices avec un préchargement adapté constatent un gain médian de 180 ms sur le LCP par rapport à un chargement depuis le CDN de Google Fonts. Suivez vos métriques LCP, CLS et FCP dans le temps pour vous assurer que le changement porte ses fruits.