Pourquoi il faut paramétrer manuellement l'installation des Google fonts ?
Le choix est immense la qualité au rendez-vous et des grands typographes et fonderies y sont représentés. Cependant pour optimiser les performances de votre sites il faut correctement les installer.
Google Fonts est un service d’hébergement gratuit de polices d’écritures pour le Web.
Se conformer aux règles RGPD
Avec l'intégration standard des polices dans Webflow, les fichiers sont hébergés sur les serveurs de Google. C'est pour cela que Webflow vous avertit :
Pour éviter cette contrainte, il faut télécharger les fichiers et les héberger directement sur les serveurs Webflow de votre site.
Optimiser les performance de chargement
Depuis Google font, vous pouvez télécharger uniquement des fichiers .ttf or ce format n'est pas optimisé pour le web.
Pour réduire le temps de chargement de la page, nous avons besoin de fichiers .woff (Web Open Font Format). Ces fichiers très compressés sont optimisés pour le web et beaucoup plus légers. Le meilleur format, et celui qui est recommandé est donc .woff2 !
Comment télécharger vos fichiers web font ?
Pour rechercher la Google font idéal, le site de google est le meilleur outil : filtres de recherche, visualisation du texte etc. Une fois la font choisi aller sur le site google-webfonts-helper.
L'interface est plus austère, mais c'est ici que vous allez pouvoir récupérer vos fichiers woff :
Télécharger vos fichiers font au format woff ou woff 2
- Choisir la font
- Sélectionner l'alaphabet (latin)
- Ne sélectionner que les graisses nécessaires et les style (regular ou italique)
- Télécharger le fichier
Dans la mesure du possible limiter le nombre de différentes polices que vous utilisez et n’importez que les styles que vous allez utiliser sur votre projet. Charger une à deux polices avec les graisses aura un effet significatif sur les performances.
Paramétrer les custom font de votre site Webflow
Depuis les paramètres de votre site, dans l'onglet Font dans la section custom font :
- Télécharger tous les fichiers nécessaires (un par graisse)
- Renommer si besoin le nom de la font, sélectionner la graisse
Je n'utilise pas Google font mais souhaite optimiser un fichier .otf ou .ttf ?
Si votre client a acheté une police d’écriture mais qu'il n'y pas dans les fichiers de .woff ou .woff2, vous aurez besoin de convertir vos fichiers .otf ou .ttf
Pour convertir vos fichiers, aller sur ce convertisseur en ligne gratuit.
Obtenir de meilleurs résultats dans la temps de chargement d'une page
Pour mon site, j'ai remplacé les fichiers .otf par .woff2 : le gain est de X5. Grâce à cette optimisation, on peut gagner de précieux points dans google PageSpeed insight.
L'objectif de ces performances est de gagner des places dans le référencement naturel SEO
