Vous pouvez utiliser la propriété CSS font-family pour définir la famille de polices pour un élément. Vous pouvez définir une famille de police en spécifiant le nom de la police que vous voulez utiliser, ou en spécifiant une liste de polices, en ordre de préférence.
body {
font-family: Arial;
}
h1 {
font-family: "Times New Roman", Times, serif;
}
Dans cet exemple, nous définissons la famille de police pour le corps de la page en utilisant une police sans-serif appelée “Arial”. Pour les éléments h1, nous définissons une famille de police appelée "Times New Roman". Si cette police n'est pas disponible, le navigateur utilisera la police Times.
Il est important de noter que les noms de police doivent être entre guillemets si le nom comporte des espaces. Si un nom de police ne contient pas d'espaces, vous pouvez le spécifier sans guillemets. Mais par convention, il est suggéré de toujours utiliser des guillements afin d'éviter tout risque d'erreur.
Enfin, il est important de vous rappeler que les polices disponibles dépendent des polices installées sur l'ordinateur de l'utilisateur final. Il est donc conseillé de définir une liste de polices en ordre de préférence pour garantir que l'apparence de votre site Web reste cohérente sur tous les dispositifs.
Voici la liste des polices disponibles par défaut :
Sans-serif : Arial, Helvetica, Verdana, Tahoma Serif : Times New Roman, Georgia, Palatino Monospace : Courier New, Lucida Console
En savoir plus sur les serif et sans-serif : https://www.adobe.com/be_fr/creativecloud/design/discover/serif-vs-sans-serif.html En savoir plus sur les monospace : https://fr.wikipedia.org/wiki/Police_d'écriture_à_chasse_fixe
Il vous sera également possible d'ajouter des polices dites "exotiques". Entendez par là, des polices non installées par défaut.
Vous avez la possibilité de charger des polices d'écriture depuis Google Font. Google Fonts est une bibliothèque de polices en ligne gratuite que vous pouvez utiliser dans vos projets Web. Voici comment vous pouvez utiliser les polices Google Fonts dans votre site Web
<head> de votre document HTML. Il ressemble généralement à ceci :<link href="<https://fonts.googleapis.com/css2?family=Nom-de-la-police&display=swap>" rel="stylesheet">
En d'autres termes, cela revient à ajouter une autre feuille de style. Vous pouvez ensuite ajouter votre police d'écriture de la sorte
p{
font-family:"Nom de la police", sans-serif;
}
Il est également possible d'utiliser @font-face mais nous verrons cela plus tard dans la formation.