Aller au contenu

Recommandez Gemeos à votre réseau et touchez une commission

Découvrir notre système d’apport d’affaires
On en discute ?

SEO / GEO5 min lecture

Comment optimiser les polices d’un site Webflow ?

Apprenez à optimiser le chargement des polices dans Webflow : font-display swap, preload WOFF2 et réduction des variantes.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment optimiser le chargement des polices dans Webflow pour accélérer l'affichage de votre site.

StratégieImpact LCPMise en place
font-display: swapFortCSS embed ou variable Webflow
Preload de la font principaleFortCustom code head
Sous-ensemble de caractères (subset)MoyenUpload font personnalisée
Limiter le nombre de variantesMoyenSupprimer les graisses inutilisées

1. Utilisez font-display: swap

Cette propriété CSS indique au navigateur d'afficher d'abord le texte avec une font système, puis de la remplacer par votre font custom une fois chargée. Sans elle, le texte reste invisible pendant le chargement (FOIT). Ajoutez ce CSS dans un embed global :

@font-face {
  font-display: swap;
}

Si vous utilisez Google Fonts via Webflow, ajoutez &display=swap à l'URL de votre font dans les paramètres du projet.

2. Préchargez votre font principale

Ajoutez dans le <head> de votre page un preload sur le fichier WOFF2 de votre font principale. Cela indique au navigateur de télécharger la font en priorité dès la réception du HTML.

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

3. Limitez le nombre de variantes

Chaque graisse (100, 300, 400, 700, 900) et style (normal, italic) est un fichier séparé. Auditez les variantes réellement utilisées dans votre projet et supprimez les autres dans Font Settings. Une font en 3 variantes au lieu de 6 = 50% de moins à télécharger.

4. Uploadez vos fonts en WOFF2

Si vous uploadez une font custom dans Webflow, utilisez le format WOFF2 : il est 30% plus léger que WOFF et supporté par tous les navigateurs modernes. Convertissez vos fonts avec CloudConvert si nécessaire.

Conclusion

L'optimisation des fonts est l'un des leviers les plus accessibles pour améliorer le score PageSpeed. Cas d'usage :

  • Réduction du FOIT (flash de texte invisible) sur les pages longues
  • Amélioration du LCP sur les pages avec du texte hero en font custom
  • Optimisation globale du poids d'une page

Publié le 19 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Ces tutoriels pourraient vous intéresser

Tutoriels similaires

Voir tout

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!