Changer la police d'un texte
body{
font-family: sans-serif;
}
On peut changer la police des textes d'un seul élément ou bien de tous les textes de la page en sélectionnant le body par exemple.
Importer une police en ligne
Il est possible d'importer une police présente en ligne de 2 manières (exemple avec la police Roboto disponible sur le site https://fonts.google.com/) :
/* Première méthode : importation de la police dans le fichier CSS directement */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
font-family: 'Roboto', sans-serif;
}
<!-- Deuxième méthode : importation de la police dans le head de la page HTML (AVANT d'inclure les fichiers CSS) -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Attention : quand on utilise une police importée, il faut partir du principe que son chargement peut échouer. Il faut donc toujours spécifier une seconde police générique "de secours" en dernier (comme sans-serif par exemple)
Importer une police locale
Pour créer une nouvelle police d'écriture à partir de fichiers de fonts en local (otf, ttf, eot, svg, woff, etc...), on utilise @font-family. Exemple de création d'une police "Signatra" à partir de fichiers rangés de cette manière :
- index.html
-
css/
- styles.css
-
fonts/
- signatra.otf
- signatra.ttf
/* Création de la nouvelle police dans le fichier styles.css */
@font-face {
font-family: 'Signatra';
src: url('../fonts/signatra.otf'),
url('../fonts/Signatra.ttf');
}
/* Utilisation */
p{
font-family: 'Signatra', sans-serif;
}