Cette page a été traduite par l'API Cloud Translation.

Premiers pas avec l'API Google Fonts

Ce guide explique comment utiliser l'API Google Fonts pour ajouter des polices à vos pages Web. Aucune programmation n'est requise. Il vous suffit d'ajouter un lien spécial vers la feuille de style à votre document HTML, puis de faire référence à la police dans un style CSS.

Un bref exemple

Exemple : Copiez le code HTML suivant et collez-le dans un fichier:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Ouvrez ensuite le fichier dans un navigateur Web récent. Vous devriez voir une page affichant les éléments suivants, dans la police appelée Tangerine:

Améliorer la qualité du Web

Cette phrase est un texte ordinaire, vous pouvez donc modifier son apparence en utilisant du code CSS. Essayez d'ajouter une ombre au style de l'exemple précédent:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Vous devriez maintenant voir une ombre projetée sous le texte:

Améliorer la qualité du Web

Et ce n'est que le début de ce que vous pouvez faire avec l'API Fonts et CSS.

Présentation

Vous pouvez commencer à utiliser l'API Google Fonts en seulement deux étapes:

Ajoutez un lien vers la feuille de style pour demander la ou les polices Web souhaitées :
```
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">
```
Stylisez un élément avec la police Web demandée, dans une feuille de style :
```
.css-selector {
font-family: 'Font Name', serif;
}
```
ou avec un style intégré sur l'élément lui-même :
```
<div style="font-family: 'Font Name', serif;">Your text</div>
```

Pour obtenir la liste des polices que vous pouvez utiliser, consultez Google Fonts.

Spécification des familles et des styles de polices dans une URL de feuille de style

Pour déterminer l'URL à utiliser dans le lien de votre feuille de style, commencez par l'URL de base de l'API Google Fonts:

https://fonts.googleapis.com/css

Ajoutez ensuite le paramètre d'URL family=, avec un ou plusieurs noms et styles de police.

Par exemple, pour demander la police Inconsolata:

https://fonts.googleapis.com/css?family=Inconsolata

Pour demander plusieurs familles de polices, séparez les noms par une barre verticale (|).

Par exemple, pour demander les polices Tangerine, Inconsolata et Droid Sans, procédez comme suit:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Le fait de demander plusieurs polices vous permet de les utiliser toutes sur votre page. (Mais n'allez pas trop loin : la plupart des pages n'ont pas besoin de nombreuses polices et demander de nombreuses polices peut ralentir le chargement de vos pages.)

Par défaut, l'API Google Fonts fournit la version standard des polices demandées. Pour demander d'autres styles ou épaisseurs, ajoutez le signe deux-points (:) au nom de la police, suivi d'une liste de styles ou d'épaisseurs séparés par des virgules (,).

Exemple :

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Pour connaître les styles et les épaisseurs disponibles pour une police donnée, consultez la liste de la police concernée dans Google Fonts.

Pour chaque style que vous demandez, vous pouvez indiquer le nom complet ou une abréviation. Pour les pondérations, vous pouvez également spécifier une pondération numérique:

Style	Spécificateurs
italique	`italic` ou `i`
gras	`bold` ou `b`, ou une pondération numérique telle que 700
gras italique	`bolditalic` ou `bi`

Par exemple, pour mettre Cantarell en italique et Droid Serif en gras, vous pouvez utiliser l'une des URL suivantes :

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Utiliser l'affichage de la police

font-display vous permet de contrôler ce qui se passe lorsque la police est 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 de la chaîne de requête :

https://fonts.googleapis.com/css?family=Roboto&display=swap

Spécifier des sous-ensembles de scripts

Certaines polices du répertoire des polices Google sont compatibles avec plusieurs scripts (comme le latin, le cyrillique et le grec). Pour spécifier les sous-ensembles à télécharger, ajoutez le paramètre de sous-ensemble à l'URL.

Par exemple, pour demander le sous-ensemble cyrillique de la police Roboto Mono, l'URL se présente comme suit:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Pour demander le sous-ensemble grec de la police Roboto Mono, l'URL se présente comme suit:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Pour demander des sous-ensembles grecs et cyrilliques de la police Roboto Mono, l'URL se présente comme suit:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

Le sous-ensemble latin est toujours inclus s'il est disponible et n'a pas besoin d'être spécifié. Veuillez noter que si un navigateur client est compatible avec la plage unicode (http://caniuse.com/#feat=font-unicode-range), le paramètre de sous-ensemble est ignoré. Le navigateur sélectionnera un sous-ensemble compatible avec la police afin d'obtenir ce dont il a besoin pour afficher le texte.

Pour obtenir la liste complète des polices et sous-ensembles de polices disponibles, consultez Google Fonts.

Optimiser les demandes de polices

Souvent, lorsque vous souhaitez utiliser une police Web sur votre site Web ou dans votre application, vous savez à l'avance 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 police. Cela permet à Google de renvoyer un fichier de police optimisé pour votre requête. Dans certains cas, cela peut réduire la taille du fichier de police jusqu'à 90%.

Pour utiliser cette fonctionnalité, il vous suffit d'ajouter text= à vos requêtes API Google Fonts. Par exemple, si vous n'utilisez Inconsolata que pour le titre de votre blog, vous pouvez placer le titre lui-même en tant que valeur de text=. Voici à quoi ressemblerait la requête:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Comme pour toutes les chaînes de requête, vous devez encoder la valeur en URL:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

Cette fonctionnalité est également compatible avec les polices internationales, ce qui vous permet de spécifier des caractères UTF-8. Par exemple, ¡Hola! est représenté comme suit:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Activer les effets de police (bêta)

Lorsque vous créez des en-têtes ou des textes sur votre site Web, vous avez souvent besoin de styliser le texte de manière décorative. Pour vous simplifier la tâche, Google propose une collection d'effets de police que vous pouvez utiliser très facilement pour créer un texte à afficher de qualité. Exemple :

C'est un effet de police !

Pour utiliser cette fonctionnalité bêta, il vous suffit d'ajouter effect= à votre requête API Google Fonts et d'ajouter le nom de classe correspondant aux éléments HTML que vous souhaitez affecter. Dans l'exemple ci-dessus, nous avons utilisé l'effet de police shadow-multiple. La requête se présente donc comme suit:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Pour utiliser l'effet, ajoutez le nom de classe correspondant à vos éléments HTML. Le nom de classe correspondant est toujours le nom de l'effet précédé de font-effect-. Le nom de classe de shadow-multiple serait donc font-effect-shadow-multiple:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Vous pouvez demander plusieurs effets en séparant les noms des effets par une barre verticale (|).

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Voici la liste complète de tous les effets de police que nous proposons:

Effet	Nom d'API	Nom du cours	Assistance
Anaglyphe	`anaglyph`	`font-effect-anaglyph`	Chrome, Firefox, Opera, Safari
Panneau en briques	`brick-sign`	`font-effect-brick-sign`	Chrome, Safari
Impression sur toile	`canvas-print`	`font-effect-canvas-print`	Chrome, Safari
Craquement	`crackle`	`font-effect-crackle`	Chrome, Safari
Décomposition	`decaying`	`font-effect-decaying`	Chrome, Safari
Destruction	`destruction`	`font-effect-destruction`	Chrome, Safari
Détresse	`distressed`	`font-effect-distressed`	Chrome, Safari
Bois vieilli	`distressed-wood`	`font-effect-distressed-wood`	Chrome, Safari
Embosse	`emboss`	`font-effect-emboss`	Chrome, Firefox, Opera, Safari
Incendie	`fire`	`font-effect-fire`	Chrome, Firefox, Opera, Safari
Animation de feu	`fire-animation`	`font-effect-fire-animation`	Chrome, Firefox, Opera, Safari
Fragile	`fragile`	`font-effect-fragile`	Chrome, Safari
Graste	`grass`	`font-effect-grass`	Chrome, Safari
Glace	`ice`	`font-effect-ice`	Chrome, Safari
Mitosis	`mitosis`	`font-effect-mitosis`	Chrome, Safari
Néon	`neon`	`font-effect-neon`	Chrome, Firefox, Opera, Safari
Outline	`outline`	`font-effect-outline`	Chrome, Firefox, Opera, Safari
Putt Green	`putting-green`	`font-effect-putting-green`	Chrome, Safari
Acier brusque	`scuffed-steel`	`font-effect-scuffed-steel`	Chrome, Safari
Ombres multiples	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome, Firefox, Opera, Safari
Épilée	`splintered`	`font-effect-splintered`	Chrome, Safari
Statique	`static`	`font-effect-static`	Chrome, Safari
Stonewash	`stonewash`	`font-effect-stonewash`	Chrome, Safari
Trois dimensions	`3d`	`font-effect-3d`	Chrome, Firefox, Opera, Safari
Flottant tridimensionnel	`3d-float`	`font-effect-3d-float`	Chrome, Firefox, Opera, Safari
Vintage	`vintage`	`font-effect-vintage`	Chrome, Safari
Fond d'écran	`wallpaper`	`font-effect-wallpaper`	Chrome, Safari

Il existe de nombreuses autres façons de styliser vos polices et de nombreuses choses sont possibles via CSS. Nous vous proposons simplement quelques idées pour vous aider à démarrer. Si vous souhaitez d'autres idées, essayez la recherche Google effets de texte css et parcourez de nombreuses idées déjà disponibles sur le Web.

Complément d'informations

Consultez la liste complète des familles de polices fournies par l'API Google Fonts sur Google Fonts.
Découvrez comment utiliser le chargeur de polices Web pour mieux contrôler le chargement des polices.
Pour en savoir plus sur le fonctionnement de l'API Google Fonts, consultez la page Considérations techniques.