Premiers pas avec l'API Google Fonts

Ce guide explique comment utiliser l'API Google Fonts pour ajouter des polices à vos pages Web. Vous n'avez pas besoin de faire de programmation ; il vous suffit d'ajouter un lien de feuille de style spécial à votre document HTML, puis de vous référer à la police dans un style CSS.

Un bref exemple

Voici un 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 moderne. Vous devriez voir une page affichant le texte suivant dans la police appelée Tangerine:

Optimiser le Web !

Cette phrase est du texte ordinaire. Vous pouvez donc modifier son apparence à l'aide de code CSS. Essayez d'ajouter une ombre au style dans l'exemple précédent:

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

Vous devriez à présent voir une ombre projetée sous le texte:

Optimiser le Web !

Ce n'est que le début de tout ce que vous pouvez faire avec l'API et les feuilles de style CSS.

Présentation

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

  1. Ajoutez un lien vers une feuille de style pour demander la ou les polices Web souhaitées :

    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Font+Name">
    

  2. Définissez le style d'un élément avec la police Web demandée, soit 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 de polices et des styles 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 famille de polices.

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 :

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

Demander plusieurs polices vous permet d'utiliser l'ensemble de ces polices sur votre page. Toutefois, n'en abusez pas. La plupart des pages n'ont pas besoin de très nombreuses polices, et le fait de demander un grand nombre de polices peut ralentir le chargement de vos pages.

L'API Google Fonts fournit la version standard des polices demandées par défaut. Pour demander d'autres styles ou pondérations, ajoutez le caractère deux-points (:) au nom de la police, suivi d'une liste de styles ou de pondérations séparés par une virgule (,).

Exemple :

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

Pour connaître les styles et les pondérations disponibles pour une police donnée, consultez la liste des polices dans Google Fonts.

Pour chaque style que vous demandez, vous pouvez indiquer soit le nom complet, soit 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 en italique bolditalic ou bi

Par exemple, pour demander l'italique Cantarell italic et Droid Serif, 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 par police

font-display vous permet de contrôler ce qui se passe lorsque la police est indisponible. Il est généralement recommandé de spécifier une valeur autre que auto par défaut.

Transmettez la valeur souhaitée dans le paramètre de requête display de la chaîne :

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

Spécifier des sous-ensembles de script

Certaines polices de l'annuaire des polices Google acceptent plusieurs scripts (latins, cyrilliques et grecs, par exemple). Pour spécifier les sous-ensembles à télécharger, vous devez ajouter le paramètre de sous-ensemble à l'URL.

Par exemple, pour demander le sous-ensemble cyrillique de la police Roboto Mono, l'URL serait la suivante:

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

Pour demander le sous-ensemble grec de la police Roboto Mono, l'URL doit être la suivante:

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 doit être la suivante:

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

Le sous-ensemble latin est toujours inclus s'il est disponible et ne doit pas être spécifié. Notez que si un navigateur client est compatible avec le paramètre unicode-range (http://caniuse.com/#feat=font-unicode-range), le paramètre de sous-ensemble est ignoré. Le navigateur sélectionne alors les sous-ensembles compatibles avec la police pour obtenir les éléments nécessaires à l'affichage du 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, vous savez à l'avance les lettres dont vous aurez besoin. Cela se produit souvent lorsque vous utilisez une police Web dans un logo ou un en-tête.

Dans ce cas, vous devez envisager de spécifier une valeur text= dans l'URL de la 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 de 90 % au maximum.

Pour utiliser cette fonctionnalité, ajoutez simplement text= à vos requêtes API Google Fonts. Par exemple, si vous n'utilisez que le nom "Inconsolata" pour le titre de votre blog, vous pouvez indiquer "text=" comme titre pour votre titre. La requête devrait se présenter comme suit:

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

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

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

Cette fonctionnalité fonctionne également 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 affichez du texte sur votre site Web, vous avez souvent besoin de lui appliquer un style décoratif. Pour vous faciliter la tâche, Google propose un ensemble d'effets de police que vous pouvez utiliser sans effort pour produire un texte d'affichage de qualité. Exemple :

C'est un effet de police !

Pour utiliser cette fonctionnalité bêta, ajoutez simplement effect= à votre requête API Google Fonts et ajoutez le nom de classe correspondant aux éléments HTML concernés. Dans notre 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é du préfixe font-effect-. Par conséquent, le nom de classe de shadow-multiple est 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 des effets de police que nous proposons:

Effet API Name Nom du cours Assistance
Anaglyphe anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
Symbole brique brick-sign font-effect-brick-sign Chrome, Safari
Impressions sur toile canvas-print font-effect-canvas-print Chrome, Safari
Croisé crackle font-effect-crackle Chrome, Safari
Dégradation decaying font-effect-decaying Chrome, Safari
Destruction destruction font-effect-destruction Chrome, Safari
Détresse distressed font-effect-distressed Chrome, Safari
Détresse distressed-wood font-effect-distressed-wood Chrome, Safari
Mousse emboss font-effect-emboss Chrome, Firefox, Opera, Safari
Incendie fire font-effect-fire Chrome, Firefox, Opera, Safari
Animation incendie fire-animation font-effect-fire-animation Chrome, Firefox, Opera, Safari
Fragile fragile font-effect-fragile Chrome, Safari
Gras grass font-effect-grass Chrome, Safari
Glace ice font-effect-ice Chrome, Safari
Mitos mitosis font-effect-mitosis Chrome, Safari
Néon neon font-effect-neon Chrome, Firefox, Opera, Safari
Contours outline font-effect-outline Chrome, Firefox, Opera, Safari
Green. putting-green font-effect-putting-green Chrome, Safari
Acier inoxydable scuffed-steel font-effect-scuffed-steel Chrome, Safari
Shadow multiple shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
Épilé splintered font-effect-splintered Chrome, Safari
Statique static font-effect-static Chrome, Safari
Lavage de pierres stonewash font-effect-stonewash Chrome, Safari
Trois dimensions 3d font-effect-3d Chrome, Firefox, Opera, Safari
Flottant en trois dimensions 3d-float font-effect-3d-float Chrome, Firefox, Opera, Safari
Tension vintage font-effect-vintage Chrome, Safari
Fond d'écran wallpaper font-effect-wallpaper Chrome, Safari

Il existe d'autres façons de styliser les polices, et bien d'autres possibilités s'offrent au CSS. Voici quelques idées pour vous aider à démarrer. Pour découvrir d'autres idées, essayez la fonctionnalité de recherche de Google effets textuels CSS, puis parcourez les nombreuses idées déjà disponibles 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 police 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.