Outil : Utiliser et optimiser vos Google Fonts
Mis à jour le :
Google Fonts est un outil proposé par Google permettant de télécharger gratuitement des polices. Vous pouvez aussi bien les utiliser en local ou les importer via la balise HTML <link> ou la règle CSS @import. Les polices Google sont déjà optimisées et conçues pour être compatibles avec tous les navigateurs.
Ajouter des Google Fonts
Pour ajouter des Google Fonts, il vous suffit de sélectionner les polices que vous souhaitez utiliser puis de cliquer sur embed.
Google vous propose deux manières pour implémenter vos polices :
- Intégrer une balise <link> dans le <head> de vos pages
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">- Intégrer une règle CSS @import dans vos feuilles de styles
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');Pour activer vos Google Fonts, vous devez appliquer la règle CSS correspondante aux polices sélectionnées, aux éléments que vous souhaitez styliser.
font-family: 'Open Sans', sans-serif;Conseils et recommandations pour optimiser vos Google fonts
Les Google Fonts sont déjà optimisées mais peuvent encore ralentir le chargement de vos pages et influer sur votre positionnement SEO.
- Limitez le nombre de polices sur vos pages ;
- Ne sélectionnez que les variantes des polices que vous utilisez, il est inutile d’ajouter les polices complètes ;
- Évitez de multiplier les balises <link>, maximisez vos requêtes en fusionnant vos polices pour les charger en une seule fois ;
- Téléchargez et hébergez vos polices directement sur votre site.