Polices locales avec @font-face

Parfois, vous voudrez utiliser une police personnalisée qui n’est pas disponible sur Google Fonts, ou vous préférez héberger vos polices vous-même pour des raisons de performance ou de confidentialité.

La règle @font-face

La règle CSS @font-face permet de définir et charger des polices personnalisées stockées dans votre projet.

Structure de dossier recommandée

projet/
├── fonts/
│   └── ma-police-custom/
│       ├── ma-police-regular.woff2
│       ├── ma-police-bold.woff2
│       └── ma-police-italic.woff2
├── css/
│   └── style.css
└── index.html

---

Exemple complet

/* Déclaration de la police - poids normal */
@font-face {
  font-family: 'Ma Police Custom';
  src: url('../fonts/ma-police-custom/ma-police-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Améliore le chargement */
}

/* Déclaration de la police - gras */
@font-face {
  font-family: 'Ma Police Custom';
  src: url('../fonts/ma-police-custom/ma-police-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Déclaration de la police - italique */
@font-face {
  font-family: 'Ma Police Custom';
  src: url('../fonts/ma-police-custom/ma-police-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Utilisation dans vos styles */
body {
  font-family: 'Ma Police Custom', sans-serif;
}

h1 {
  font-family: 'Ma Police Custom', sans-serif;
  font-weight: 700; /* Utilise la variante bold définie ci-dessus */
}

em {
  font-family: 'Ma Police Custom', sans-serif;
  font-style: italic; /* Utilise la variante italic définie ci-dessus */
}

---

Formats de polices

Les formats les plus courants sont :

• WOFF2 : format moderne, très compressé (recommandé en priorité)
• WOFF : bon support, un peu moins compressé
• TTF/OTF : formats traditionnels, plus lourds

Support multi-format pour compatibilité maximale

@font-face {
  font-family: 'Ma Police Custom';
  src: url('../fonts/ma-police-custom/ma-police-regular.woff2') format('woff2'),
       url('../fonts/ma-police-custom/ma-police-regular.woff') format('woff'),
       url('../fonts/ma-police-custom/ma-police-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Le navigateur utilisera le premier format qu’il supporte (WOFF2 en priorité).

---

Propriété font-display

La propriété font-display contrôle comment la police s’affiche pendant le chargement :

• swap : affiche une police système immédiatement, puis change quand la police custom est chargée (recommandé)
• block : attend que la police soit chargée (peut créer du “flash”)
• fallback : compromis entre swap et block
• optional : utilise la police custom seulement si elle charge très vite

@font-face {
  font-family: 'Ma Police Custom';
  src: url('../fonts/ma-police-custom/ma-police-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Recommandé pour éviter le texte invisible */
}

---

Avantages et inconvénients

Fonts locales (@font-face)

Avantages :

• ✅ Contrôle total sur la police
• ✅ Pas de requête externe (meilleure confidentialité)
• ✅ Peut fonctionner hors ligne
• ✅ Polices uniques non disponibles sur Google Fonts

Inconvénients :

• ❌ Vous devez gérer les fichiers de polices
• ❌ Optimisation manuelle nécessaire
• ❌ Augmente la taille de votre projet

Google Fonts

Avantages :

• ✅ Facile à intégrer
• ✅ Déjà optimisées
• ✅ Grande bibliothèque de choix
• ✅ Mise en cache possible sur plusieurs sites

Inconvénients :

• ❌ Requête externe nécessaire
• ❌ Questions de confidentialité (RGPD)
• ❌ Dépend d’un service tiers

Quand utiliser quoi ?

• Google Fonts : pour la plupart des projets, simple et efficace
• Fonts locales : pour des polices uniques, des projets sensibles (confidentialité), ou quand vous avez besoin d’un contrôle total

---

Exemple pratique complet

/* ===========================================
   POLICES PERSONNALISÉES - @font-face
   =========================================== */

/* Police pour les titres - Regular */
@font-face {
  font-family: 'Story Title';
  src: url('../fonts/story-title/story-title-regular.woff2') format('woff2'),
       url('../fonts/story-title/story-title-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Police pour les titres - Bold */
@font-face {
  font-family: 'Story Title';
  src: url('../fonts/story-title/story-title-bold.woff2') format('woff2'),
       url('../fonts/story-title/story-title-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Police pour le texte - Regular */
@font-face {
  font-family: 'Story Text';
  src: url('../fonts/story-text/story-text-regular.woff2') format('woff2'),
       url('../fonts/story-text/story-text-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Police pour le texte - Italic */
@font-face {
  font-family: 'Story Text';
  src: url('../fonts/story-text/story-text-italic.woff2') format('woff2'),
       url('../fonts/story-text/story-text-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ===========================================
   UTILISATION DES POLICES
   =========================================== */

:root {
  --font-heading: 'Story Title', 'Arial', sans-serif;
  --font-body: 'Story Text', 'Georgia', serif;
}

body {
  font-family: var(--font-body);
}

h1, h2, h3 {
  font-family: var(--font-heading);
}

---