Utiliser l'API CSS Google Fonts pour diffuser efficacement des polices Web
Au fil des ans, la technologie des polices Web a beaucoup évolué. Cette pratique, qui était auparavant réservée à une niche et nécessitait une image de texte ou un plug-in Flash (et qui compromettait l'optimisation de votre site Web pour les moteurs de recherche), est désormais une pratique standard sur le Web. Autrefois, vous deviez charger une police entière avant le chargement de la page, avec des styles et des caractères que vous n'aviez peut-être même pas utilisés. Mais même cela est désormais révolu.
L'API CSS Google Fonts a également évolué au fil des années pour suivre l'évolution de la technologie des polices Web. Elle a beaucoup évolué depuis sa proposition de valeur initiale, qui consistait à accélérer le Web en permettant à votre navigateur de mettre en cache les polices couramment utilisées sur tous les sites Web qui utilisaient l'API. Ce n'est plus vrai, mais l'API fournit toujours des optimisations supplémentaires et importantes pour que les sites Web se chargent rapidement et que les polices fonctionnent correctement.
Grâce à l'API CSS Google Fonts, votre site Web ne peut demander que les données de police dont il a besoin pour réduire au maximum le temps de chargement du CSS, ce qui permet aux visiteurs de charger votre contenu aussi rapidement que possible. L'API répondra à chaque requête avec la meilleure police pour ce navigateur Web.
Pour ce faire, il vous suffit d'inclure une seule ligne de code HTML dans votre code.
Utiliser l'API CSS Google Fonts
La documentation de l'API CSS Google Fonts résume bien cela :
Vous n'avez pas besoin de programmer quoi que ce soit. Il vous suffit d'ajouter un lien de feuille de style spécial à votre document HTML, puis de faire référence à la police dans un style CSS.
Vous devez au minimum inclure une seule ligne dans votre code HTML, comme suit :
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Lorsque vous demandez une police à l'API, vous spécifiez la ou les familles de polices souhaitées, et éventuellement leurs épaisseurs, styles, sous-ensembles et de nombreuses autres options. L'API traitera ensuite votre requête de l'une des deux manières suivantes:
- Si votre requête utilise des paramètres courants pour lesquels l'API dispose déjà de fichiers, elle renvoie immédiatement un CSS à votre utilisateur, le redirigeant vers ces fichiers.
- Si vous avez demandé une police avec des paramètres que l'API n'a pas encore mis en cache, elle sous-sélectionne vos polices instantanément, à l'aide de HarfBuzz pour ce faire rapidement, et renvoie un CSS qui les pointe.
Les fichiers de police peuvent être volumineux, mais ce n'est pas obligatoire.
Il est vrai que les polices Web peuvent être volumineuses. Un seul poids de Noto Sans Japanese en WOFF2 représente presque 3,4 Mo.Le télécharger pour chacun de vos utilisateurs ralentirait le temps de chargement de votre page. Lorsque chaque milliseconde compte et que chaque octet est précieux, vous devez vous assurer de ne charger que les données dont vos utilisateurs ont besoin.
L'API CSS Google Fonts peut créer de très petits fichiers de polices (appelés sous-ensembles), générés en temps réel, pour ne fournir à vos utilisateurs que le texte et les styles requis par votre site Web. Au lieu de diffuser une police entière, vous pouvez demander des caractères spécifiques à l'aide du paramètre text.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
L'API CSS fournit également automatiquement des optimisations supplémentaires de polices Web à vos utilisateurs, sans aucun paramètre d'API. L'API fournit aux utilisateurs les fichiers CSS pour lesquels unicode-range est déjà activé (si leur navigateur Web est compatible) afin qu'ils ne chargent les polices que pour les caractères spécifiques dont votre site Web a besoin.
Le descripteur CSS unicode-range est un outil qui peut désormais être utilisé pour lutter contre les téléchargements de polices volumineux. Cette propriété CSS définit une plage de caractères Unicode que la déclaration @font-face contient. Si l'un de ces caractères est affiché sur la page, la police correspondante est téléchargée. Cette méthode fonctionne bien pour tous les types de langues. Vous pouvez donc prendre une police qui inclut des caractères latins, grecs ou cyrilliques et créer des sous-ensembles plus petits. Dans le graphique précédent, vous pouvez voir que si vous deviez charger ces trois jeux de caractères, vous auriez plus de 600 glyphes.
Cela permet également d'utiliser des polices chinoises, japonaises et coréennes (CJK) pour le Web. Dans le graphique précédent, vous pouvez voir qu'une police CJK couvre 15 à 20 fois le nombre de caractères d'une police de caractères latins. Ces polices sont généralement très grandes, et de nombreux caractères de ces langues ne sont pas utilisés aussi fréquemment que d'autres.
L'utilisation de l'API CSS et de la plage Unicode peut réduire les transferts de fichiers de près de 90 %. À l'aide du descripteur unicode-range, vous pouvez définir chaque partie séparément. Chaque tranche n'est téléchargée que lorsque votre contenu contient l'un des caractères de ces plages de caractères.
Exemple: Si vous souhaitez définir uniquement le mot こんにちは en Noto Sans JP, vous pouvez:
- Hébergez vos propres fichiers WOFF2.
- Utilisez l'API CSS pour récupérer le fichier WOFF2.
- Utilisez l'API CSS avec le paramètre text= défini sur "こんテちに".
Dans cet exemple, vous pouvez constater qu'en utilisant l'API CSS, vous économisez déjà 97,5 % par rapport à l'hébergement de la police WOFF2 en auto-hébergement, grâce à la prise en charge intégrée de l'API pour séparer les grandes polices en plage Unicode. En allant plus loin et en spécifiant exactement le texte que vous souhaitez afficher, vous pouvez réduire davantage la taille de la police à seulement 95,3% de la police de l'API CSS, soit 99,9% de moins que la police auto-hébergée.
L'API CSS Google Fonts fournit automatiquement les polices dans le format le plus petit et le plus compatible compatible avec le navigateur de votre utilisateur. Si l'utilisateur utilise un navigateur compatible avec WOFF2, l'API fournit les polices dans WOFF2, mais s'il utilise un navigateur plus ancien, l'API fournit les polices dans un format compatible avec ce navigateur. Pour réduire la taille de fichier de chaque utilisateur, l'API supprime également les données des polices lorsqu'elles ne sont pas nécessaires. Par exemple, les données d'indication seront supprimées pour les utilisateurs dont les navigateurs n'en ont pas besoin.
Pérenniser vos polices Web avec l'API CSS Google Fonts
L'équipe Google Fonts contribue également aux nouvelles normes W3C qui continuent d'innover dans le domaine des technologies de police Web, telles que WOFF2. L'un des projets en cours est le transfert de polices incrémentiel, qui permet aux utilisateurs de charger de très petites parties de fichiers de polices à mesure qu'ils sont utilisés à l'écran et de diffuser le reste à la demande, dépassant ainsi les performances de la plage Unicode. Lorsque vous utilisez notre API Web Fonts, vos utilisateurs bénéficient de ces améliorations de la technologie de transfert de polices sous-jacente lorsqu'elles sont disponibles dans leur navigateur.
C'est toute la beauté de l'API Fonts: vos utilisateurs bénéficient de chaque nouvelle amélioration technologique, sans aucune modification de votre site Web. Nouveau format de police Web ? Aucun problème. Compatibilité avec un nouveau navigateur ou un nouveau système d'exploitation ? C'est pris en charge. Ainsi, au lieu de vous encombrer de la maintenance de vos polices Web, vous pouvez vous concentrer sur vos utilisateurs et votre contenu.
Les polices variables sont compatibles avec les variables intégrées.
Les polices variables sont des fichiers de polices pouvant stocker une plage de variations de conception sur plusieurs axes. La nouvelle version de l'API CSS Google Fonts les prend en charge. L'ajout d'un axe de variation supplémentaire offre une nouvelle flexibilité avec une police, mais peut presque doubler la taille du fichier de police.
Lorsque vous êtes plus précis dans votre requête d'API CSS, l'API CSS Google Fonts ne peut fournir que la partie de la police variable dont votre site Web a besoin, afin de réduire la taille de téléchargement pour les utilisateurs. Cela permet d'utiliser des polices variables pour le Web sans entraîner de longs temps de chargement des pages. Pour ce faire, spécifiez une seule valeur sur une seule axe ou une plage. Vous pouvez même spécifier plusieurs axes et plusieurs familles de polices dans une seule requête. L'API est flexible pour répondre à vos besoins.
Simple à implémenter, optimisé pour vous
L'API CSS Google Fonts vous aide à fournir des polices :
- Plus compatible avec les navigateurs Web.
- aussi petite que possible.
- Livraison rapide.
- Plus facile à utiliser
Pour en savoir plus sur Google Fonts, consultez fonts.google.com. Pour en savoir plus sur l'API CSS, consultez la documentation de l'API.
Remerciements
Image héros de leesehee.