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 à votre site Web . Aucune programmation n'est nécessaire. il vous suffit d'ajouter feuille de style vers votre document HTML, puis faites référence à la police dans un style CSS.

Un bref exemple

Voici un exemple. Copiez et collez le code HTML suivant 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 le ci-dessous, dans la police Tangerine:

Rendre le Web magnifique !

Cette phrase est un texte ordinaire. Vous pouvez donc la modifier en utilisant du code CSS. Essayer en ajoutant 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:

Rendre le Web magnifique !

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

Présentation

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

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">
```
Appliquez un style à 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écifier 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 le bouton URL de base de l'API Fonts:

https://fonts.googleapis.com/css

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

Par exemple, pour demander le 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 Mandarine Inconsolata Droid Sans:

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'exagérez pas. La plupart des pages n'ont pas besoin d'un grand nombre de polices. un grand nombre de polices peut ralentir le chargement de vos pages.)

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

Exemple :

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

Pour savoir quels styles et épaisseurs sont disponibles pour une police donnée, consultez la dans Google Fonts.

Pour chaque style que vous demandez, vous pouvez fournir le nom complet ou un abbreviation; 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 comme 700
gras italique	`bolditalic` ou `bi`

Par exemple, pour mettre Cantarell en italique et Droid Serif en gras, vous pouvez utiliser n'importe quelle 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 avec police

font-display vous permet contrôler ce qui se passe lorsque la police n'est pas disponible. Spécifier une valeur "autre" que la valeur par défaut auto est généralement appropriée.

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 acceptent plusieurs scripts (latin, cyrillique et grec, par exemple). Dans la commande pour spécifier les sous-ensembles à télécharger, le paramètre de sous-ensemble à l'URL.

Par exemple, pour demander le sous-ensemble cyrillique du sous-ensemble cyrillique Roboto Mono, l'URL doit être:

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

Pour demander le sous-ensemble grec du Roboto Mono, l'URL doit être:

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

Pour demander des sous-ensembles grecs et cyrilliques du sous-ensemble Roboto Mono, l'URL doit être:

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é. Notez que si un navigateur client prend en charge des plages Unicode (http://caniuse.com/#feat=font-unicode-range) le paramètre de sous-ensemble est ignoré. le navigateur sélectionne les sous-ensembles pris en charge par la police pour 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 vos demandes de polices

Souvent, lorsque vous souhaitez utiliser une police Web sur votre site Web 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 de renvoyer un fichier de police optimisé 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. Pour exemple, si vous utilisez uniquement Inconsolata pour le titre de votre blog, vous pouvez placer le titre lui-même comme valeur de text=. Voici à quoi ressemblerait la demande par exemple:

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 le format UTF-8. caractères. 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 du texte sur votre site Web, styliser votre texte de manière décorative. Pour vous simplifier la tâche, Google a mis en place a fourni un ensemble d'effets de police que vous pouvez utiliser avec un minimum d'efforts pour produire un texte d'affichage de qualité. Exemple :

C'est un effet de police !

Pour utiliser cette fonctionnalité bêta, il vous suffit d'ajouter effect= à vos polices Google Fonts. requête API et ajoutez le nom de classe correspondant aux éléments HTML que vous que vous souhaitez affecter. Dans notre exemple ci-dessus, nous avons utilisé l'effet de police shadow-multiple, la requête ressemblerait donc à ceci:

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

Pour utiliser l'effet, ajoutez le nom de classe correspondant à vos éléments HTML. La le nom de la classe correspondante est toujours celui de l'effet précédé de font-effect-, Le nom de la classe pour 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 les séparant 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 de la classe	Assistance
Anaglyphe	`anaglyph`	`font-effect-anaglyph`	Chrome, Firefox, Opera, Safari
Panneau en briques	`brick-sign`	`font-effect-brick-sign`	Chrome et Safari
Impression sur toile	`canvas-print`	`font-effect-canvas-print`	Chrome et Safari
Craquement	`crackle`	`font-effect-crackle`	Chrome et Safari
Dépréciation	`decaying`	`font-effect-decaying`	Chrome et Safari
Destruction	`destruction`	`font-effect-destruction`	Chrome et Safari
Absolument	`distressed`	`font-effect-distressed`	Chrome et Safari
Bois vieilli	`distressed-wood`	`font-effect-distressed-wood`	Chrome et Safari
Emboss	`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 et Safari
Herbe	`grass`	`font-effect-grass`	Chrome et Safari
Glace	`ice`	`font-effect-ice`	Chrome et Safari
Mitose	`mitosis`	`font-effect-mitosis`	Chrome et Safari
Néon	`neon`	`font-effect-neon`	Chrome, Firefox, Opera, Safari
Outline	`outline`	`font-effect-outline`	Chrome, Firefox, Opera, Safari
Putting Green	`putting-green`	`font-effect-putting-green`	Chrome et Safari
Acier renversé	`scuffed-steel`	`font-effect-scuffed-steel`	Chrome et Safari
Ombres multiples	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome, Firefox, Opera, Safari
Éclaboussé	`splintered`	`font-effect-splintered`	Chrome et Safari
Statique	`static`	`font-effect-static`	Chrome et Safari
Stonewash	`stonewash`	`font-effect-stonewash`	Chrome et Safari
Trois dimensions	`3d`	`font-effect-3d`	Chrome, Firefox, Opera, Safari
Flottant tridimensionnel	`3d-float`	`font-effect-3d-float`	Chrome, Firefox, Opera, Safari
Rétro	`vintage`	`font-effect-vintage`	Chrome et Safari
Fond d'écran	`wallpaper`	`font-effect-wallpaper`	Chrome et Safari

Il existe bien d’autres façons de styliser vos polices, et beaucoup de choses sont possibles via CSS. Nous vous donnons simplement quelques idées pour vous aider à démarrer. Pour plus idées, essayez la recherche Google "effets texte CSS" et de nombreuses idées qui sont déjà sur le Web !

Documentation complémentaire

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 avoir plus de contrôle sur le chargement des polices.
En savoir plus sur le fonctionnement de l'API Google Fonts sur le Considérations techniques.