Google Fonts est désormais entièrement compatible avec les polices variables dans la mise à jour de l'API v2. Nous vous expliquons comment appeler des familles de polices uniques et multiples, et comment spécifier des plages d'axes. Pour en savoir plus sur les polices variables, consultez cette brochure illustrée de manière interactive par David Berlow chez TypeNetwork.
Nouveautés
Tout commence par une nouvelle URL de base:
https://fonts.googleapis.com/css2
La syntaxe permettant de spécifier des styles dans chaque famille a changé pour décrire les espaces de conception variables.
Guides de démarrage rapide
Copiez et collez ce code HTML dans un fichier:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
À l'aide d'un navigateur pour ouvrir le fichier, la page doit afficher le texte "Making the Web Beautiful" (Rendez le Web beau) dans la police Crimson Pro.
Familles multiples
Pour demander plusieurs familles, spécifiez le paramètre family= pour chaque famille.
Par exemple, pour demander les polices Crimson Pro et Literata:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Copiez et collez ce code HTML dans un fichier:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
À l'aide d'un navigateur, pour ouvrir le fichier, la page doit afficher le texte "Making the Web Beautiful", d'abord dans Crimson Pro, puis dans Literata.
Plages d'axes
Les polices variables offrent des plages de styles continus, souvent sans latence supplémentaire. Cela concerne le responsive design. Cette typographie dynamique utilise des plages de styles continus. Toutes les pondérations sont comprises entre 100 et 900 sur une page, et la pondération varie en fonction de certaines conditions.
Pour demander une plage pour un axe de police variable, joignez les deux valeurs avec ..
| Police(s) | Demande |
|---|---|
Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro Italic [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro Bold italique et [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Styles individuels, comme le poids
Sans spécifications de style, l'API fournit le style par défaut de la famille demandée. Pour demander d'autres styles individuels, tels que des pondérations spécifiques, ajoutez deux-points (:) après le nom de la famille de polices, suivi d'une liste de mots clés de propriété d'axe dans l'ordre alphabétique, d'un signe at (@) et d'une ou plusieurs listes de valeurs pour ces propriétés d'axe.
Ces exemples en sont des exemples concrets.
| Police(s) | Demande |
|---|---|
| Crimson Pro (par défaut) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Crimson Pro Bold | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro Standard et Gras | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Bold et Bold Italic | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts répertorie tous les styles disponibles pour chaque famille de polices.
Style par défaut
Lorsqu'une requête ne spécifie pas de position ni de plage pour un axe, la position par défaut est utilisée. La position par défaut de l'axe italique est 0 (normal) et celle de l'axe des pondérations est de 400 (normal).
Pour les familles dont les axes ne contiennent pas la position par défaut, les requêtes qui ne spécifient pas de position pour ces axes échoueront. Par exemple, lorsque vous demandez une famille avec un axe de pondération compris entre 500 et 900, la position du poids doit être spécifiée.
Pondérations non standards
Avec les polices statiques, les styles d'épaisseur sont généralement spécifiés en tant que multiples de 100 (par exemple, 300, 400, 700). Les polices variables proposent à la fois les pondérations standards et intermédiaires. Pour afficher une pondération intermédiaire:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Optimiser la latence et la taille des fichiers
Soyez précis au sujet des styles que vous utilisez. L'API fournit les styles demandés dans l'ensemble de polices le plus compact. La demande de styles inutilisés peut inciter vos utilisateurs à télécharger plus de données de police qu'ils n'en ont besoin, ce qui entraîne une latence accrue. Si vous n'utilisez que trois pondérations spécifiques, spécifiez-les en tant que styles individuels dans votre requête. Si vous utilisez une plage de pondérations continue, spécifiez cette plage dans votre requête.
Utiliser l'affichage des polices
La propriété font-display vous permet de contrôler ce qui se passe lorsque la police est en cours de chargement ou indisponible. Il est généralement approprié de spécifier une valeur autre que la valeur par défaut auto.
Transmettez la valeur souhaitée dans le paramètre display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Optimiser vos requêtes de polices
Souvent, lorsque vous souhaitez utiliser une police Web sur votre site ou dans votre application, vous savez à l'avance de quelles lettres vous aurez besoin. Cela se produit souvent lorsque vous utilisez une police Web dans un logo ou un titre.
Dans ce cas, vous devez envisager de spécifier une valeur text= dans l'URL de requête de la police. Cela permet à Google Fonts de renvoyer un fichier de polices optimisé pour votre requête. Dans certains cas, cela peut réduire la taille du fichier de police de 90%.
Pour utiliser cette fonctionnalité, il vous suffit d'ajouter text= à votre requête API. Par exemple, si vous n'utilisez que le titre Inconsolata pour le titre de votre blog, vous pouvez saisir le titre lui-même comme valeur de text=. Voici à quoi ressemble la demande:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Comme pour toutes les chaînes de requête, vous devez encoder la valeur en URL:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Cette fonctionnalité fonctionne également pour les polices internationales, vous permettant de spécifier des caractères UTF-8. Par exemple, ¡Hola! est représenté comme suit:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Notez que le paramètre "text=" ne peut être spécifié qu'une seule fois. Elle s'applique à toutes les familles concernées par la demande. Utilisez des requêtes API distinctes si vous avez besoin d'optimiser le texte de différentes familles.
Créer des URL d'API
Niveau de sévérité
En règle générale, les requêtes acceptées sont plus strictes avec l'API CSS mise à jour que l'API CSS d'origine.
Consignes générales:
- Lister les axes par ordre alphabétique (
en-USparamètres régionaux) - Les groupes de valeurs d'axe (les tuples) doivent être triés numériquement
- Les tuples ne doivent pas se chevaucher ni être touchés (par exemple,
wght400..500 et 500..600).
Spécification d'URL de l'API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec : <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name : nom de la famille de polices :
axis_tag_list : <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: balise sur l'axe, par exemple ital, wdth ou wght
axis_tuple_list : <axis_tuple>[;<axis_tuple>...]
axis_tuple : <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <float>
range : <float>..<float>
float: une valeur comprise dans la plage de l'axe correspondant
text: le texte qui sera affiché dans la police demandée
display: auto | block | swap | fallback | optional
Legacy Browser Support
Les navigateurs qui ne sont pas compatibles avec les polices variables ne pourront peut-être pas afficher votre conception comme prévu. Vérifiez la compatibilité avec les polices variables des navigateurs sur caniuse.
En pratiquant l'amélioration progressive, vous pouvez éviter un comportement inattendu dans ces anciens navigateurs. Utilisez des requêtes @supports dans votre CSS pour contrôler les fonctionnalités de police variable.
Dans cet exemple, nous souhaitons utiliser la pondération 450 du texte Markazi, mais nous devons revenir aux tailles standards (pondération 400) ou moyennes (pondération 500) lorsque les caractéristiques de polices variables ne sont pas compatibles:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
La requête CSS Markazi+Text:wght@450 envoie une pondération de 450 aux clients compatibles avec les polices variables et une pondération de 400 à 500 pour les autres. En général, les demandes de remplacement concernant la plage de requêtes sont disponibles dans les anciens navigateurs.
| Axis | Créations de remplacement |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Ces exemples présentent les styles disponibles dans les anciens navigateurs pour différentes requêtes.
| Demande | Styles disponibles sur les anciens navigateurs |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Polices de variables disponibles
Un tableau des polices variables disponibles dans la version 2 de l'API est disponible ici.
Complément d'informations
- Consultez la liste complète des familles de polices fournies par l'API Google Fonts sur Google Fonts.
- Pour en savoir plus sur le fonctionnement de l'API Google Fonts, consultez la page Considérations techniques.