codelynx.dev
🇫🇷🇬🇧

Retour 07/11/2024

Comment changer la police en CSS ?

Écris par Melvyn Malherbe le 07/11/2024


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 !

Pourquoi changer la police est important

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.

Les méthodes pour changer la police en CSS

1. Utiliser une police système

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 :

CSS
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 :

  • MacOS : San Francisco
  • iOS : San Francisco
  • Windows 11 : Segoe UI Variable
  • Android : Roboto

2. Utiliser @font-face

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 :

CSS
@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;
}

3. Utiliser Google Fonts (la méthode que je préfère)

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 :

  1. Va sur Google Fonts
  2. Choisis ta police préférée
  3. Copie le lien <link> qu'ils te donnent
  4. Colle-le dans le <head> de ton HTML
  5. Utilise la police dans ton CSS

Voici un exemple concret avec la police "Roboto" :

Dans cet exemple, on utilise Roboto en regular (400) pour le texte normal et en bold (700) pour le titre.

Conseils pour bien choisir sa police

  1. Lisibilité avant tout : Choisis une police qui reste lisible même en petit.
  2. Cohérence avec ton design : Ta police doit coller avec l'ambiance générale de ton site.
  3. Performance : Attention, trop de polices différentes peuvent ralentir ton site.
  4. Responsive : Assure-toi que ta police reste belle sur mobile.

Conclusion

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 !

BeginWeb

Cours HTML / CSS / JS gratuit

Maîtrise le web rapidement avec cette formation.