Chargement...

Polices web en CSS

Vous connaissez déjà font-family, la taille et le poids. Les polices web chargent un caractère qui n’est pas forcément sur l’appareil du visiteur — déclarez-le avec @font-face, utilisez le nom de famille comme toute autre police, et terminez calmement par un fallback.

Les pièces de @font-face

📊 @font-face en un coup d’œil

Pièce Rôle au quotidien
font-family Le nom que vous inventez puis utilisez en CSS
src Où vivent le(s) fichier(s) de police (url(...) et souvent format(...))
font-weight / font-style Quelle graisse ce fichier représente (regular, bold, italic…)
font-display Comment le texte se comporte pendant le chargement (ex. swap)

Deux étapes calmes suffisent : enregistrer la graisse avec @font-face, puis appeler ce même nom de famille dans vos règles normales. Sauter l’une des deux laisse une pile qui ne trouve jamais le fichier personnalisé.

Un @font-face minimal

Donnez un nom clair à la graisse et pointez src vers un fichier de police sur votre site (ou CDN).

@font-face de base

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

Proposer plus d’un format

Les navigateurs modernes préfèrent woff2. Lister woff ensuite couvre les navigateurs plus anciens. Mettez le meilleur format en premier.

woff2 puis woff

css
CSS Code 
@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}

font-display — afficher le texte plus tôt

font-display: swap laisse le navigateur afficher d’abord un texte de secours, puis échanger la police web à l’arrivée — souvent mieux qu’un long trou invisible.

Display swap

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

Utiliser la famille déclarée

Après @font-face, appelez le même nom font-family dans vos règles — et gardez un fallback générique.

Appliquer la famille personnalisée

css
CSS Code 
body {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}

Une habitude calme d’auto-hébergement

N’hébergez que les graisses dont vous avez besoin, préférez woff2, réglez font-display, et gardez toujours une pile système/générique.

Titre avec graisse bold chargée

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}

À vous de jouer

  1. Écrivez un bloc @font-face avec un font-family personnalisé et un src woff2.
  2. Ajoutez une seconde ligne src pour woff.
  3. Réglez font-display: swap.
  4. Appliquez "Your Name", sans-serif sur body.
  5. Si vous avez un fichier bold, ajoutez un @font-face séparé pour le poids 700 — puis font-weight: 700 sur un titre.

Erreurs fréquentes

  • Déclarer @font-face sans jamais utiliser ce nom exact dans font-family
  • Omettre la pile de fallback (casse si le fichier échoue)
  • Charger trop de graisses et styles inutilisés (pages lentes)
  • Laisser le texte invisible longtemps sans stratégie font-display
  • Mélanger cette leçon avec text-shadow / effets (viennent ensuite)

Résumé

  • @font-face enregistre un nom de famille personnalisé et pointe vers des fichiers de police
  • Préférez woff2, éventuellement avec woff en secours
  • font-display: swap garde souvent le texte lisible pendant le chargement
  • Utilisez le même nom de famille en CSS avec un fallback système/générique
  • Ne chargez que les graisses nécessaires ; les effets comme text-shadow sont une leçon ultérieure

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 28 de 35
Css Tutoriel