Polices Google CSS
Polices Google
Si vous ne souhaitez utiliser aucune des polices standard en HTML, vous pouvez utiliser Google Fonts.
Les polices Google sont gratuites et proposent plus de 1 000 polices.
Comment utiliser les polices Google
Ajoutez simplement un lien de feuille de style spécial dans la section <head>, puis faites référence à la police dans le CSS.
Exemple
Ici, nous voulons utiliser une police nommée "Sofia" de Google Fonts :
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Résultat:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Exemple
Ici, nous voulons utiliser une police nommée "Trirong" de Google Fonts :
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Résultat:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Exemple
Ici, nous souhaitons utiliser une police nommée "Audiowide" de Google Fonts :
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Résultat:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Remarque : lorsque vous spécifiez une police dans CSS, indiquez toujours au moins une police de secours (pour éviter les comportements inattendus). Donc, ici aussi, vous devez ajouter une famille de polices génériques (comme serif ou sans-serif) à la fin de la liste.
Pour une liste de toutes les polices Google disponibles, consultez notre didacticiel How To - Google Fonts .
Utiliser plusieurs polices Google
Pour utiliser plusieurs polices Google, séparez simplement les noms de police par un caractère pipe ( |), comme ceci :
Exemple
Demander plusieurs polices :
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Résultat:
Audiowide Font
Sofia Font
Trirong Font
Remarque : La demande de plusieurs polices peut ralentir vos pages Web ! Alors faites attention à cela.
Styliser les polices Google
Bien sûr, vous pouvez styliser les polices Google comme vous le souhaitez, avec CSS !
Exemple
Stylisez la police "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Résultat:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Activation des effets de police
Google a également activé différents effets de police que vous pouvez utiliser.
Ajoutez d'abord à l'API Google, puis ajoutez un nom de classe spécial à l'élément qui va utiliser l'effet spécial. Le nom de la classe commence toujours par
et se termine par le .effect=effectnamefont-effect-effectname
Exemple
Ajoutez l'effet feu à la police "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Résultat:
Sofia on Fire
Pour demander plusieurs effets de police, séparez simplement les noms des effets par un caractère pipe ( |), comme ceci :
Exemple
Ajoutez plusieurs effets à la police "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Résultat:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect