Héberger soi-même les polices Google pour de meilleurs Core Web Vitals

Héberger soi-même les polices Google pour améliorer les Core Web Vitals

Google Fonts est utilisé sur 54 % de tous les sites web selon le Web Almanac 2025. La plupart de ces sites chargent les polices depuis les serveurs de Google. C'est un problème. Chaque requête Google Fonts ajoute des connexions externes, du CSS bloquant le rendu et des fichiers de police que vous ne pouvez pas précharger, mettre en cache ou contrôler. L'auto-hébergement de ces mêmes polices supprime 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 que Google utilise comme signaux de classement : LCP (chargement), INP (interactivité) et CLS (stabilité visuelle). L'auto-hébergement des polices améliore principalement le LCP et le CLS, et peut également améliorer le First Contentful Paint (FCP).

Impact de Google Fonts sur les Core Web Vitals

Google Fonts, souvent inclus dans les pages web pour améliorer la typographie et le design, peut avoir un impact significatif sur les Core Web Vitals, principalement sur le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS).

Pour la plupart des gens à qui je parle, c'est une information nouvelle. Le CDN de Google est censé être le meilleur au monde. Alors pourquoi Google Fonts est-il mauvais pour la vitesse de la page ?

1. L'argument du « cache partagé » est mort. De nombreux développeurs croient encore que parce que Google Fonts est si populaire, les visiteurs ont probablement la police en cache depuis un autre site. C'était vrai avant 2020. Depuis Chrome v86 et Safari (qui le fait depuis 2013), les navigateurs partitionnent leur cache HTTP par domaine de premier niveau. Cela signifie que votre site télécharge Google Fonts depuis le début pour chaque nouveau visiteur, quels que soient les autres sites qu'il a visités. L'avantage 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. Le premier problème avec Google Fonts est qu'il repose sur une feuille de style externe hébergée par fonts.google.com ou fonts.googleapis.com. Cette feuille de style ne peut pas être réutilisée par différents domaines (comme beaucoup de gens semblent le penser). Cela signifie que la feuille de style bloquant le rendu n'est jamais servie depuis le cache ultra-rapide du navigateur pour les nouveaux visiteurs et ralentira toujours le rendu de la page.

3. Cela nécessite 2 connexions vers 2 nouveaux serveurs. Le deuxième problème est que pour télécharger le fichier CSS et les fichiers de police, nous devons nous connecter à 2 serveurs différents. Chaque connexion initiale à un nouveau serveur a une surcharge importante et prend un peu plus de temps. Du temps que nous aurions pu économiser en servant les fichiers depuis notre connexion déjà ouverte vers notre serveur. Pour éviter cela, Google conseille de se préconnecter à ses domaines. Cela atténuera un peu le problème mais c'est encore loin d'être parfait

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

4. Vous avez un contrôle limité sur l'attribut font-display. Bien que Google Fonts vous permette de définir l'attribut font-display, vous ne pouvez le définir que globalement. Cela signifie que tous les fichiers woff2 auront le même paramètre font-display.

5. L'emplacement final du fichier woff2 est inconnu. Cela signifie que nous ne pouvons pas précharger nos polices les plus importantes. Cela signifie que nos fichiers de police sont mis en file d'attente pour le téléchargement relativement tard et nous aurons probablement un décalage de mise en page visible causé par le flash de texte non stylisé (FOUT). En savoir plus sur la façon de garantir que le texte reste visible pendant le chargement des polices web.

6. Vous n'avez aucun contrôle sur les fichiers de police. Vous ne pouvez pas les réduire davantage, vous ne pouvez pas définir d'en-têtes de cache longs et vous ne pouvez pas les servir depuis votre propre CDN.

Avantages de l'auto-hébergement des polices Google

L'auto-hébergement des polices Google implique de servir les fichiers de police depuis vos propres serveurs au lieu de dépendre des serveurs externes de Google. Cette approche peut présenter plusieurs avantages :

1. Vitesse de livraison des polices améliorée : L'auto-hébergement des polices réduit la dépendance aux serveurs externes, conduisant à une livraison plus rapide des polices et, par conséquent, à un rendu plus rapide du contenu textuel. Cette amélioration peut avoir un impact positif sur le LCP, garantissant que le plus grand élément de texte devient visible plus rapidement. Le Web Almanac 2025 montre que l'auto-hébergement est en hausse : 31,5 % des sites de bureau hébergent désormais exclusivement leurs polices, contre 28 % en 2024.

2. Réduction des décalages de mise en page : En hébergeant vous-même les polices Google, vous pouvez contrôler la façon dont la police est chargée et affichée, minimisant les risques de décalages de mise en page causés par un rendu de police retardé. Cela aide à améliorer la stabilité visuelle globale de votre page web et affecte positivement le CLS.

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

Conformité RGPD

En janvier 2022, le tribunal régional de Munich a statué que le chargement de Google Fonts depuis les serveurs de Google viole le RGPD car il transfère les adresses IP des visiteurs à Google sans consentement. L'auto-hébergement élimine entièrement ce problème car aucune donnée n'est envoyée à Google lorsque les polices se chargent. Si votre site a des visiteurs européens, c'est une raison de plus pour s'auto-héberger.

Bonnes pratiques pour l'auto-hébergement des polices Google

Pour optimiser vos polices Google auto-hébergées pour de meilleures performances Core Web Vitals, envisagez de mettre en œuvre les bonnes pratiques suivantes :

1. Utiliser le format WOFF2 uniquement : WOFF2 offre la meilleure compression (environ 30 % plus petit que WOFF) et a un support navigateur de 96 %+. Le seul navigateur qui ne prend pas en charge WOFF2 est Internet Explorer, qui a atteint sa fin de vie en juin 2022. Vous n'avez plus besoin d'un recours à WOFF.

2. Sous-ensembles de polices : Pour réduire davantage la taille des fichiers de police, envisagez d'utiliser des sous-ensembles de polices, ce qui implique d'inclure uniquement les caractères nécessaires au contenu de votre page web. Cela peut conduire à un chargement de police plus rapide et à de meilleurs Core Web Vitals. Google Fonts crée déjà des sous-ensembles par plage unicode, mais lors de l'auto-hébergement, vous pouvez aller plus loin avec des outils comme fonttools.

3. Attribut font-display stratégique : Configurez l'attribut font-display stratégiquement pour contrôler le rendu du texte pendant le chargement de la police. La valeur "swap" accélérera le First Contentful Paint en garantissant que les polices de secours sont affichées jusqu'à ce que la police web soit entièrement chargée. La valeur "optional" sautera entièrement l'échange de police, empêchant les décalages de mise en page en ne remplaçant jamais la police de secours. Un mélange stratégique des deux optimisera souvent à la fois le Cumulative Layout Shift et le First Contentful Paint. Selon le Web Almanac 2025, 50 % des pages utilisent désormais font-display: swap, mais seulement 0,5 % utilisent font-display: optional, qui est le meilleur choix pour une performance CWV maximale sur les polices non critiques.

4. Précharger les polices : Assurez-vous que les polices sont disponibles le plus tôt possible en préchargeant les polices les plus importantes (1 ou 2 maximum) avec le mécanisme de préchargement de lien. Incluez toujours l'attribut crossorigin, même pour les polices de même origine, sinon le navigateur téléchargera la police deux fois. Seuls 12 % des pages préchargent leurs polices, c'est donc un gain facile.

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

Comment héberger soi-même une police Google (la bonne méthode)

Le téléchargement et l'auto-hébergement d'une police Google prennent environ 10 minutes. Gardez à l'esprit que vous devez toujours vérifier la licence de la police avant de l'utiliser. La plupart des polices Google sont disponibles sous la licence SIL Open Font, qui permet une utilisation gratuite, y compris commerciale.

La méthode la plus rapide consiste à utiliser google-webfonts-helper, qui vous permet de télécharger n'importe quelle police Google sous forme de fichiers WOFF2 avec un CSS prêt à l'emploi. Mais si vous voulez le faire manuellement pour comprendre exactement ce qui se passe, suivez ces étapes :

1. Allez sur le site web de Google Fonts sur fonts.google.com.

2. Sélectionnez la police que vous souhaitez utiliser et choisissez les graisses que vous souhaitez inclure.

3. Sur la page de la police, dans la barre supérieure, cliquez sur le bouton 'selected families'. 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 maintenant toutes les déclarations font-face disponibles pour la police.

   

5. Vous remarquerez peut-être qu'il y a plus d'un fichier woff2 même si nous n'avons utilisé qu'un seul fichier de police. C'est parce qu'il y a un fichier de police différent pour différentes plages unicode. Pour savoir quelles polices nous devrions télécharger, vous devriez ajouter temporairement la feuille de style hébergée par Google à votre site web. Utilisez le raccourci Ctrl-Shift-I pour ouvrir vos Chrome DevTools. Accédez à l'onglet réseau et cliquez sur Font. Maintenant, actualisez la page (Ctrl-R) pour voir quelle police est déclenchée pour le téléchargement.

6. Faites correspondre ce nom de fichier de police au fichier woff2 correspondant dans la feuille de style. Vous savez maintenant quel fichier de police est utilisé pour votre site web !

7. L'étape suivante consiste à copier l'URL complète de la police et à l'ouvrir dans votre navigateur. Cela déclenchera un téléchargement pour ce fichier de police. Copiez ce fichier sur votre site web.

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

9. Préchargez la police (si c'est une police visuellement importante).

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

Un exemple concret

Voici un exemple complet utilisant la police Inter avec toutes les bonnes pratiques appliquées : préchargement, WOFF2 uniquement, une valeur font-display stratégique et une police système de secours.

<head>
  <title>Polices Google auto-hébergées</title>
  <!-- précharger la police (crossorigin est requis, même pour les polices de même origine) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Police Inter auto-hébergée au format WOFF2 */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Repli vers la police system-ui */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Bienvenue sur mon site web</h1>
  <p>Cette page utilise Inter avec un repli system-ui.</p>
</body>

Surveiller l'impact

Après être passé aux polices auto-hébergées, vérifiez l'amélioration avec le Real User Monitoring. Dans nos données CoreDash, les sites qui hébergent eux-mêmes leurs polices avec un préchargement approprié voient une amélioration médiane du LCP de 180 ms par rapport au chargement depuis le CDN Google Fonts. Suivez vos LCP, CLS et FCP au fil du temps pour vous assurer que le changement fonctionne.