Polices Google CSS


Table des matières

    Afficher la table des matières


Polices Google

Si vous ne souhaitez utiliser aucune des polices standard HTML, vous pouvez utiliser Google Fonts.

L'utilisation des polices Google est gratuite et propose 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 souhaitons 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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


Exemple

Ici, nous souhaitons 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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>

<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>


Remarque : Lorsque vous spécifiez une police en CSS, indiquez toujours à au minimum 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, visitez notre tutoriel Comment faire - Google Fonts.


Utiliser plusieurs polices Google

Pour utiliser plusieurs polices Google, séparez simplement les noms de polices par une barre verticale. caractère (|), comme ceci :

Exemple

Demandez 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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<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>
<body>

<h1 class="a">Audiowide Font</h1>

<h1 class="b">Sofia Font</h1>

<h1 class="c">Trirong Font</h1>

</body>
</html>


Remarque : La demande de plusieurs polices peut ralentir vos pages Web ! Alors soyez prudent à ce sujet.



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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<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>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>



Activation des effets de police

Google a également activé différents effets de police que vous pouvez utiliser.

Ajoutez d'abord effect=effectname à l'API Google, puis ajoutez un nom de classe spécial à l'élément qui va utiliser le spécial effet. Le nom de la classe commence toujours par font-effect- et se termine par le effectname.

Exemple

Ajoutez 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 on 
  Fire</h1>
</body>

Résultat :

Sofia on Fire

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<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>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>

</body>
</html>


Pour demander plusieurs effets de police, séparez simplement les noms des effets par un caractère barre verticale. (|), 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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<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>
</html>