Une API pour des polices Web rapides et esthétiques

Utiliser l'API CSS Google Fonts pour diffuser efficacement des polices Web

Jimmy Mooney

Au fil des ans, la technologie des polices Web a considérablement évolué. Ce qui était auparavant une pratique de niche nécessitant une image du texte ou un plug-in Flash (et qui compromet le référencement naturel de votre site Web) est désormais une pratique courante sur le Web. Il était une fois, il était une fois, de charger une police complète avant que la page ne se charge, avec des styles et des caractères que vous n'aviez peut-être même pas utilisés. Mais cette tâche est passée.

L'API CSS Google Fonts a également évolué au fil des années pour suivre les évolutions technologiques des polices Web. Elle a beaucoup évolué depuis sa proposition de valeur initiale : rendre le Web plus rapide 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 propose toujours d'autres optimisations importantes pour que les sites Web se chargent rapidement et que les polices fonctionnent correctement.

Avec l'API CSS Google Fonts, votre site Web ne peut demander que les données de police dont il a besoin afin de réduire au maximum le temps de chargement de son code CSS. Les visiteurs de votre site peuvent ainsi charger votre contenu le plus rapidement possible. L'API répondra à chaque requête en utilisant la police la mieux adaptée à ce navigateur Web.

Pour ce faire, il suffit d'inclure une seule ligne de code HTML dans votre code.

Utiliser l'API CSS Google Fonts

Le récapitulatif est présenté dans la documentation de l'API CSS Google Fonts:

Aucune programmation n'est requise. Il vous suffit d'ajouter un lien spécial à la feuille de style dans votre document HTML, puis de faire référence à la police dans un style CSS.

Il vous suffit d'inclure une seule ligne dans votre code HTML, comme ceci:

<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 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:

  1. Si votre requête utilise des paramètres communs pour lesquels l'API dispose déjà de fichiers, le code CSS est immédiatement renvoyé à l'utilisateur, en le dirigeant vers ces fichiers.
  2. Si vous avez demandé une police avec des paramètres qui n'ont pas encore été mis en cache par l'API, elle crée un sous-ensemble de polices à la volée à l'aide de HarfBuzz, et renvoie un CSS renvoyant vers elles.

Les fichiers de police peuvent être volumineux, mais il n'est pas obligatoire

Les polices Web peuvent être grandes, c'est vrai. Un seul poids de Noto Sans Japan dans WOFF2 est de près de 3,4 Mo.Le téléchargement de ce fichier pour chacun de vos utilisateurs serait un frein au temps de chargement de votre page. Lorsque chaque milliseconde compte et que chaque octet est précieux, vous devez vous assurer de charger uniquement 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, afin de ne présenter aux utilisateurs que le texte et les styles requis par votre site Web. Au lieu de diffuser une police complète, 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" />

Graphique indiquant le nombre de caractères composés du latin standard, du grec basique et du grec étendu.

L'API CSS propose également d'autres optimisations automatiques des polices Web pour vos utilisateurs, sans aucun paramètre d'API. L'API diffusera auprès de vos utilisateurs des fichiers CSS pour lesquels unicode-range est déjà activé (si cette fonctionnalité est compatible avec leur navigateur Web). Ils ne chargent alors les polices que pour les caractères spécifiques dont votre site Web a besoin.

Le descripteur CSS de la plage Unicode 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 contient la déclaration @font-face. Si l'un de ces caractères est affiché sur la page, cette police est téléchargée. Cette méthode fonctionne bien pour toutes les langues. Vous pouvez donc créer des sous-ensembles plus petits pour une police comprenant des caractères latins, grecs ou cyrilliques. Dans le graphique précédent, vous pouvez voir que si vous devez charger ces trois jeux de caractères, vous auriez plus de 600 glyphes.

Graphique indiquant le nombre de caractères en latin standard, en latin étendu, en coréen et en japonais.

Cette opération active également les polices chinoises, japonaises et coréennes (CJK) sur 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 la plupart des caractères de ces langues ne sont pas utilisés aussi souvent que d'autres.

L'utilisation de l'API CSS et de la plage Unicode peut réduire les transferts de fichiers d'environ 90%. À l'aide du descripteur unicode-range, vous pouvez définir chaque partie séparément, et chaque segment n'est téléchargé que lorsque votre contenu contient l'un des caractères de ces plages de caractères.

Par exemple, si vous souhaitez définir uniquement le mot "こんちち" en Noto Sans JP, vous pouvez :

  • Auto-hébergez vos propres fichiers WOFF2.
  • Utilisez l'API CSS pour récupérer le formulaire WOFF2.
  • Utilisez l'API CSS avec le paramètre text= défini sur "こんちこ".

Graphique comparant différentes méthodes de téléchargement de Noto Sans JP.

Dans cet exemple, vous pouvez constater qu'en utilisant l'API CSS, vous économisez déjà 97,5% par rapport à l'auto-hébergement de la police WOFF2, grâce à la prise en charge intégrée de l'API pour la séparation des polices volumineuses en plage Unicode. En allant un peu plus loin et en spécifiant exactement le texte à afficher, vous pouvez réduire davantage la taille de la police à seulement 95,3% de celle de l'API CSS (soit 99,9% plus petite 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 accepté par le navigateur de l'utilisateur. Si votre utilisateur utilise un navigateur prenant en charge WOFF2, l'API fournira les polices dans WOFF2, mais s'il utilise une ancienne version de navigateur, l'API fournira les polices dans un format pris en charge par ce navigateur. Pour réduire la taille de fichier pour 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 à l'élaboration des nouvelles normes W3C, qui continuent d'innover les technologies de polices Web, comme WOFF2. L'un des projets actuels est le transfert de polices incrémentiel, qui permet aux utilisateurs de charger de très petites parties des fichiers de police lorsqu'ils sont utilisés à l'écran et de diffuser le reste à la demande, au-delà des performances de la plage Unicode. Lorsque vous utilisez notre API Web Fonts, vos utilisateurs bénéficient des améliorations de la technologie de transfert des polices sous-jacentes lorsqu'elles sont disponibles dans leur navigateur.

C'est toute la beauté d'une API de polices: 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 système d'exploitation ? C'est réglé. Ainsi, au lieu de vous encombrer de la maintenance de vos polices Web, vous êtes libre de vous concentrer sur vos utilisateurs et votre contenu.

Les polices variables sont compatibles

Les polices variables sont des fichiers de polices qui peuvent stocker des variantes de conception sur plusieurs axes. La nouvelle version de l'API CSS Google Fonts est compatible avec ces polices. L'ajout d'un axe de variation supplémentaire offre davantage de flexibilité avec une police d'écriture, mais peut presque doubler la taille du fichier de police.

Lorsque votre requête API CSS est plus précise, l'API CSS Google Fonts ne peut diffuser 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 que le temps de chargement des pages soit trop long. Pour ce faire, vous pouvez spécifier une seule valeur sur un axe ou une plage. Vous pouvez même spécifier plusieurs axes et plusieurs familles de polices en une seule requête. L'API est flexible et s'adapte à vos besoins.

Simple à implémenter, optimisé pour vous

L'API CSS Google Fonts vous permet d'importer des polices qui sont:

  • Meilleure compatibilité avec les navigateurs Web.
  • Le plus petit possible.
  • Livré rapidement.
  • Plus facile à utiliser.

Pour en savoir plus sur les polices Google Fonts, consultez la page fonts.google.com. Pour en savoir plus sur l'API CSS, consultez la documentation de l'API.

Remerciements

Image principale créée par leesehee.