Google Fonts est désormais entièrement compatible avec les polices variables dans la mise à jour de la version 2 de l'API. Nous expliquer comment appeler à la fois des familles de polices unique et plusieurs et comment spécifier les plages des axes. Pour en savoir plus sur les polices variables, brochure illustrée interactive de David Berlow de TypeNetwork.
Nouveautés
Tout commence par une nouvelle URL de base:
https://fonts.googleapis.com/css2
La syntaxe permettant de spécifier des styles au sein de chaque famille a été modifiée pour décrire une police variable : « conception d’espaces ».
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 : Beau Web", en police Crimson Pro.
Plusieurs familles
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 "Rendre le Web magnifique", d'abord dans Crimson Pro, puis dans Literata.
Plages d'axes
Les polices variables offrent une plage continue de styles, souvent sans la latence. Ceci est pertinent pour le responsive design. Cette typographie dynamique utilise des plages continues de styles, offrant toutes les des pondérations comprises entre 100 et 900 sur une page, et faire varier le poids de façon réactive en fonction de certaines conditions.
Pour demander une plage d'un axe de police variable, joignez les deux valeurs avec ...
| Police(s) | Requête |
|---|---|
Pourpre [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Pourpre italique [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 l'épaisseur
Sans spécifications de style, l'API fournit le style par défaut des famille demandée. Pour demander d'autres styles individuels, comme des épaisseurs spécifiques, ajouter un deux-points (:) après le nom de la famille de polices, suivi d'une liste d'axes les mots clés de propriété par ordre alphabétique, le signe arobase (@) et une ou plusieurs listes de valeurs pour ces propriétés d'axe.
Ces exemples illustrent ce processus.
| Police(s) | Requête |
|---|---|
| Pourpre (par défaut) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Pourpre pro gras | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro, taille standard et Gras | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Bold & Gras italique | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts liste tous les styles disponibles pour chaque famille de polices.
Style par défaut
Lorsqu'une requête ne spécifie pas de position ou de plage pour un axe, la valeur par défaut sera utilisée. La position par défaut de l'axe en italique est 0 (normal) et la valeur par défaut pour l'axe des pondérations est de 400 (standard).
Pour les familles dont les axes ne contiennent pas la position par défaut, les requêtes qui si aucune position n'est spécifiée pour ces axes échouera. Par exemple, lorsque vous demandez un famille dont l'axe de pondération est compris entre 500 et 900, la position de la pondération doit être spécifié.
Pondérations non standards
Avec les polices statiques, les styles d'épaisseur sont généralement des multiples de 100 (par exemple, 300, 400, 700). Les polices variables offrent à la fois les épaisseurs de police standards et des pondérations 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
Définissez précisément les styles que vous utilisez. L'API fournit les styles demandés dans l'ensemble de polices le plus compact. Demander des styles inutilisés peut amener vos utilisateurs de télécharger plus de données de police que nécessaire, ce qui entraîne une latence accrue. Si vous utilisez uniquement 3 épaisseurs spécifiques, spécifiez-les dans votre requête en tant que styles individuels. Si vous utilisez une plage de pondérations continue, spécifiez cette plage dans votre requête.
Utiliser l'affichage avec police
font-display
vous permet de contrôler ce qui se passe pendant le chargement de la police ou
autrement indisponible. Spécifier une valeur autre que la valeur par défaut auto est
généralement approprié.
Transmettez la valeur souhaitée dans le paramètre display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Optimiser vos demandes de polices
Souvent, lorsque vous souhaitez utiliser une police Web sur votre site ou dans votre application, de savoir à 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 votre police.
URL de la requête. Cela permet à Google Fonts de renvoyer
un fichier de police optimisé pour
votre demande. Dans certains cas, cela permet de réduire
la taille du fichier de police jusqu'à
90%.
Pour utiliser cette fonctionnalité, il vous suffit d'ajouter text= à votre requête API. Par exemple, si
vous n'utilisez qu'Inconsolata pour le titre de votre blog, vous pouvez le placer
elle-même comme valeur de text=. Voici à quoi ressemblerait 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é est également compatible avec les polices internationales, ce qui vous permet de spécifier le format UTF-8. caractères. Par exemple, ¡Hola! est représenté comme suit:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Notez que la partie "text=" ne peut être spécifié qu'une seule fois. Il s'applique à toutes les familles de la requête. Veuillez utiliser des requêtes API distinctes si vous avez besoin différentes optimisations de texte dans plusieurs familles.
Créer des URL d'API
Niveau de sévérité
En règle générale, l'API CSS mise à jour est plus stricte sur les requêtes que l'API CSS d'origine.
Consignes générales:
- Répertorier les axes par ordre alphabétique (paramètres régionaux
en-US) - Les groupes de valeurs d'axe (c'est-à-dire les tuples) doivent être triés par ordre numérique
- Les tuples ne peuvent pas se chevaucher ni être touchés (par exemple,
wght400..500 et 500..600).
Spécification de l'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: tag d'axe, par exemple ital, wdth et 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: valeur comprise dans la plage de l'axe correspondant
text: texte qui sera affiché dans la police de caractères demandée
display: auto | block | swap | fallback | optional
Legacy Browser Support
Les navigateurs non compatibles avec les polices variables risquent de ne pas pouvoir afficher votre conception prévu. Vérifiez la compatibilité des polices variables des navigateurs sur caniuse.
En pratiquant l'amélioration progressive,
vous pouvez éviter tout comportement inattendu
dans ces anciens navigateurs. Utiliser @supports
les requêtes dans votre CSS pour accéder aux caractéristiques de police variables.
Dans cet exemple, nous souhaitons utiliser une pondération de 450 pour le texte de Markazi, mais de utiliser la pondération standard (pondération 400) ou moyenne (pondération 500) lorsque la variable fonctionnalités de police non prises en charge:
<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
des polices et des épaisseurs variables de 400 et 500 à celles qui ne le font pas. En général,
des alternatives autour de la plage de votre requête
seront disponibles dans les anciens navigateurs.
| Axe | Créations de remplacement |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Ces exemples montrent les styles qui seraient disponibles dans les anciens navigateurs pour certains différentes demandes.
| Requête | Styles disponibles dans les anciens navigateurs |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Polices variables disponibles
Un tableau des polices variables disponibles dans la version 2 de l'API est disponible ici.
Documentation complémentaire
- Consultez la liste complète des familles de polices fournies par l'API Google Fonts sur Google Fonts :
- En savoir plus sur le fonctionnement de l'API Google Fonts sur le Considérations techniques.