Comment changer la police en CSS ?
07/11/2024 • Melvynx
Loading...
On va parler d'un truc super important en CSS : comment changer la police de caractères. Si t'en as marre d'utiliser toujours la même police par défaut, cet article est fait pour toi !
Avant de rentrer dans le vif du sujet, parlons un peu de l'importance de choisir la bonne police. La typographie, c'est pas juste un détail, c'est ce qui va donner le ton à ton site web. Une bonne police peut rendre ton site plus pro, plus fun, ou plus élégant selon ce que tu cherches.
La méthode la plus simple, c'est d'utiliser une police qui est déjà installée sur l'ordi de l'utilisateur. Voici comment faire :
body {
font-family: Arial, sans-serif;
}Ici, on dit au navigateur : "Utilise Arial si elle est dispo, sinon prends une police sans-serif par défaut".
Les polices par défaut varies selon les systèmes mais voici les 7 polices disponibles partout : Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Georgia, Times New Roman.
Ensuite en fonction des OS tu as d'autre police :
Si tu veux utiliser une police personnalisée que tu as téléchargée, tu peux utiliser @font-face. Voilà comment ça marche.
D'abord il faut rajouter ta police dans un dossier accessible à ton projet, si tu utilises un frameworm ce sera souvent dans le dossier public et sinon, tu peux juste mettre le chemin :
@font-face {
font-family: "MaPolicePerso";
src:
url("chemin/vers/ma-police.woff2") format("woff2"),
url("chemin/vers/ma-police.woff") format("woff");
}
body {
font-family: "MaPolicePerso", sans-serif;
}Google Fonts, c'est une mine d'or pour les devs web. C'est gratuit, facile à utiliser, et il y a un choix énorme. Voici comment l'utiliser :
<link> qu'ils te donnent<head> de ton HTMLVoici un exemple concret avec la police "Roboto" :
[
{
"code": "invalid_type",
"expected": "number",
"received": "string",
"path": [
"height"
],
"message": "Expected number, received string"
}
]Dans cet exemple, on utilise Roboto en regular (400) pour le texte normal et en bold (700) pour le titre.
Changer la police en CSS, c'est un truc simple qui peut vraiment booster l'apparence de ton site. N'hésite pas à expérimenter avec différentes polices pour trouver celle qui convient le mieux à ton projet.
Si tu veux approfondir tes connaissances en CSS, je te conseille de jeter un œil à mon article sur le guide complet de Flexbox en CSS. Et si tu veux vraiment pousser ta maîtrise du développement web, ma formation NextJS pourrait t'intéresser.
N'oublie pas, la typographie c'est un art. Prends le temps de bien choisir tes polices, ça peut vraiment faire la différence dans tes projets !