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:
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:
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:
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">
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 :
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 |
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.