CSS Google Fonts
Google Fonts
Si vous ne souhaitez pas utiliser l'une des polices standard en HTML, vous pouvez opter pour Google Fonts.
Google Fonts est gratuit et propose plus de 1000 polices parmi lesquelles choisir.
Comment utiliser Google Fonts
Il suffit d'ajouter un lien vers une feuille de style spéciale dans la section <head> et ensuite de référencer 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 :
Police Sofia
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 :
Police Trirong
Lorem ipsum dolor sit amet.
123456790
Exemple
Ici, nous voulons 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 :
Police Audiowide
Lorem ipsum dolor sit amet.
123456790
Remarque : Lors de la spécification d'une police dans le CSS, il est toujours conseillé de lister au moins une police de secours (pour éviter des comportements inattendus). Ainsi, vous devriez également ajouter une famille de polices générique (comme serif ou sans-serif) à la fin de la liste.
Pour une liste de toutes les polices Google disponibles, visitez notre Tutoriel - Google Fonts .
Utiliser plusieurs polices Google
Pour utiliser plusieurs polices Google, il suffit de séparer 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 :
Police Audiowide
Police Sofia
Police Trirong
Remarque : Demander plusieurs polices peut ralentir vos pages web ! Faites donc attention à cela.
Styliser les polices Google
Bien sûr, vous pouvez styliser les polices Google comme vous le souhaitez avec CSS !
Exemple
Styliser 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 :
Police Sofia
Lorem ipsum dolor sit amet.
123456790
Activer les effets de police
Google a également activé différents effets de police que vous pouvez utiliser.
Ajoutez d'abord effect= nomdel'effet à l'API Google, puis ajoutez un nom de classe spécial à l'élément qui va utiliser l'effet spécial. Le nom de classe commence toujours par font-effect- et se termine par nomdel'effet .
Exemple
Ajouter l'effet de 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 en feu</h1>
</body>
Résultat :
Sofia en feu
Pour demander plusieurs effets de police, il suffit de séparer les noms d'effet par un caractère pipe ( | ), comme ceci :
Exemple
Ajouter 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">Effet Néon</h1>
<h1 class="font-effect-outline">Effet Contour</h1>
<h1 class="font-effect-emboss">Effet Relief</h1>
<h1 class="font-effect-shadow-multiple">Effet Ombre Multiple</h1>
</body>
Résultat :
Effet Néon
Effet Contour
Effet Relief
Effet Ombre Multiple