Police web : Google Fonts, font-display et vitesse du site
Police web : comment la choisir, l'héberger et la charger avec font-display sans ralentir votre site. Guide pas à pas, pièges à éviter et réglages utiles.
C'est quoi une police web ?
Une police, c'est le dessin des lettres de votre site. Sans police web, le navigateur utilise celles déjà installées sur l'ordinateur du visiteur, comme Arial ou Georgia. Avec une police web, il télécharge un fichier et affiche vos textes dans le style choisi, sur tous les écrans.
Ce fichier pèse quelques dizaines de kilo-octets, parfois plus. Il s'ajoute aux images, aux scripts et aux feuilles de style. C'est pourquoi la police compte dans la vitesse d'une page, au même titre qu'une photo trop lourde.
Les formats à connaître
- WOFF2 : le format moderne, le plus léger, lu par tous les navigateurs actuels.
- WOFF : l'ancien format, utile seulement pour de très vieux navigateurs.
- TTF et OTF : des formats pour l'ordinateur, trop lourds pour le web.
- Police variable : un seul fichier qui contient toutes les graisses, du fin au gras.
Étape 1 : choisir une police qui sert votre message
Vos clients ne lisent pas une police, ils lisent un texte. La première qualité d'une police web est donc la lisibilité, surtout sur mobile. Un style trop fin ou trop décoratif fatigue l'œil et fait fuir les visiteurs qui recherchent une info précise.
Les bons réflexes
- Limitez-vous à deux familles : une pour les titres, une pour le texte.
- Chargez seulement les graisses utiles, par exemple normal et gras.
- Vérifiez les accents français, l'euro et les guillemets « ».
- Testez la police sur un petit écran avant de valider.
Le réglage de l'interligne et de l'espacement compte autant que le choix de la police. Notre guide sur le line height et le letter spacing détaille ces réglages pas à pas.
Étape 2 : Google Fonts ou police hébergée chez vous ?
Google Fonts est un catalogue gratuit de polices libres. Il suffit de copier une ligne de code pour l'utiliser. C'est simple, mais ce n'est pas toujours le meilleur choix pour un site qui doit être rapide et conforme.
Les limites de Google Fonts en lien direct
À chaque visite, le navigateur se connecte aux serveurs de Google. Cela ajoute une étape réseau avant l'affichage du texte. Surtout, l'adresse IP du visiteur part vers Google : en Europe, un tribunal allemand a déjà jugé cette pratique contraire au RGPD sans consentement. Ce point rejoint les règles de votre bandeau cookies RGPD.
La solution : héberger la police vous-même
Vous téléchargez les fichiers WOFF2 et vous les placez sur votre propre serveur. Le texte se charge depuis le même domaine que la page, sans tiers. Les navigateurs cloisonnent désormais leur cache par site, donc passer par Google ne fait plus gagner de temps. Un CDN et un bon cache navigateur font le reste.
Étape 3 : régler font-display
La propriété font-display dit au navigateur quoi faire pendant que la police se télécharge. Sans elle, certains navigateurs cachent le texte quelques instants : c'est l'écran blanc où rien ne se lit. Avec la bonne valeur, le visiteur lit tout de suite.
- swap : affiche une police de secours, puis bascule vers la vôtre. Le choix le plus courant.
- optional : utilise votre police seulement si elle arrive très vite. Idéal pour la stabilité.
- fallback : un compromis entre les deux.
- block : cache le texte en attendant. À éviter pour le contenu.
Sur Google Fonts, ajoutez display=swap à la fin du lien. En auto-hébergement, écrivez font-display: swap; dans la règle @font-face de votre feuille de style.
Étape 4 : éviter que la page saute
Avec swap, la police de secours n'a pas la même taille que la vôtre. Au changement, les lignes bougent et les boutons glissent. Google mesure ce décalage dans le CLS, l'un des Core Web Vitals.
Les corrections utiles
- Précharger la police principale avec une balise link rel=preload et l'attribut crossorigin.
- Choisir une police de secours aux proportions proches.
- Ajuster la police de secours avec size-adjust dans @font-face.
- Réduire le fichier aux seuls caractères latins (subsetting).
Si le décalage persiste, notre guide pour corriger le CLS liste les autres causes possibles. Pensez aussi aux feuilles de style qui bloquent l'affichage, expliquées dans l'article sur le render blocking.
Ce qui fait varier le temps et le coût
Optimiser une police web prend plus ou moins de temps selon votre site. Un thème WordPress qui charge cinq familles via une extension demande plus de travail qu'un site sur mesure déjà propre. Le nombre de langues, de graisses et de pages modèles joue aussi. Chez RankerSquare, un site vitrine sur-mesure est proposé dès 19,90 € par mois en abonnement, polices optimisées incluses ; les autres projets sont sur devis via notre page création de site internet.
Questions fréquentes
Il n'existe pas de police idéale pour tous. La bonne police est lisible sur mobile, gère les accents et colle à votre image. Les polices sans empattement comme Inter ou Roboto sont souvent sûres pour le texte courant.
En lien direct, oui, un peu : le navigateur doit contacter un serveur externe avant d'afficher le texte. En hébergeant les fichiers chez vous, en WOFF2 et avec font-display, l'impact devient très faible.
Swap affiche toujours votre police, même si elle arrive tard, quitte à faire bouger la page. Optional abandonne votre police si elle tarde, pour garder une page stable. Swap privilégie l'image de marque, optional la stabilité.
