Pourquoi le choix de vos polices impacte directement votre site

La typographie représente plus de 90% du contenu visuel d’un site web. Une police mal choisie ou mal chargée ralentit votre site, nuit à la lisibilité et dégrade l’expérience utilisateur. Ce guide vous montre comment intégrer des polices web proprement, optimiser leur chargement, et éviter le flash de texte invisible (FOIT) qui fait fuir les visiteurs.

Google Fonts : intégration en 2 méthodes

Méthode 1 : le lien HTML (la plus simple)

Allez sur fonts.google.com, choisissez vos polices, et copiez le code dans votre <head> :

<!-- Charger Inter (texte) et Playfair Display (titres) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

Points importants :

Les deux preconnect accélèrent la connexion au serveur de Google Fonts
display=swap affiche d’abord une police système puis la remplace → le texte est lisible immédiatement
Ne chargez que les graisses dont vous avez besoin (400, 500, 700 ici, pas toute la famille)

Méthode 2 : @import dans le CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

À éviter en production. Le @import bloque le rendu du CSS tant que la police n’est pas téléchargée. Utilisez toujours la méthode <link> en production.

Méthode 3 : auto-héberger les polices (la plus performante)

Téléchargez les fichiers de police et servez-les depuis votre propre serveur. Aucune requête vers Google, chargement plus rapide, et conformité RGPD (pas de données envoyées à Google).

Utilisez google-webfonts-helper pour télécharger les fichiers et générer le CSS automatiquement :

/* Placer les fichiers dans /fonts/ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-v13-latin-700.woff2') format('woff2');
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Pourquoi WOFF2 suffit : le format WOFF2 est supporté par 97%+ des navigateurs en 2026. Inutile d’ajouter TTF, EOT ou WOFF1 sauf si vous ciblez Internet Explorer (ce que vous ne devriez pas faire).

Les 5 règles d’or de la typographie web

1. Maximum 2 polices par site

Une police pour les titres, une pour le texte courant. Chaque police supplémentaire ajoute 50-150 Ko de téléchargement. Deux polices bien choisies sont plus élégantes que cinq qui se battent.

2. Toujours déclarer une pile de polices de secours

/* Bon : pile complète avec fallback */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

/* Mauvais : pas de fallback */
font-family: 'Inter';

Si Inter ne charge pas, le navigateur utilise la police système la plus proche. L’utilisateur voit du texte lisible immédiatement au lieu d’un trou vide.

3. Utiliser font-display: swap

Cette propriété CSS dit au navigateur : « affiche le texte avec une police de secours immédiatement, puis remplace par la web font quand elle est prête ». Sans swap, le texte est invisible pendant le chargement (FOIT — Flash of Invisible Text).

4. Limiter les graisses chargées

Chaque graisse (400, 500, 600, 700) est un fichier séparé de 15-40 Ko. Ne chargez que ce que vous utilisez réellement :

400 (Regular) : texte courant
700 (Bold) : titres et emphase
500 (Medium) : sous-titres (optionnel)

5. Précharger la police critique

<link rel="preload" href="/fonts/inter-v13-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

Le preload demande au navigateur de télécharger cette police en priorité, avant même d’analyser le CSS. À utiliser uniquement pour la police du texte principal (pas les titres qui apparaissent plus bas).

Tailles et espacement : les valeurs qui marchent

body {
  font-size: 16px;          /* Minimum absolu pour la lisibilité */
  line-height: 1.6;          /* Espacement entre les lignes */
  letter-spacing: -0.01em;   /* Légère compression pour Inter */
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }    /* Responsive automatique */
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }

p {
  max-width: 65ch;  /* 65 caractères par ligne = confort de lecture optimal */
  margin-bottom: 1.5em;
}

La fonction clamp() définit un minimum, une taille fluide et un maximum. Le titre s’adapte automatiquement entre mobile et desktop sans media query.

Combinaisons de polices recommandées

Usage	Titres	Texte	Style
Corporate / pro	Playfair Display	Inter	Élégant et moderne
Tech / startup	Space Grotesk	DM Sans	Géométrique et clean
Blog / éditorial	Merriweather	Source Sans Pro	Lisible et sérieux
Créatif / portfolio	Syne	Work Sans	Original et moderne
Minimaliste	Inter Bold	Inter Regular	Une seule police = chargement rapide

Tester vos performances de chargement de police

Ouvrez Chrome DevTools → onglet Network
Filtrez par Font
Rechargez la page (Ctrl+Shift+R)
Vérifiez le nombre de fichiers de police chargés et leur taille totale
Objectif : moins de 100 Ko total pour toutes les polices

Exercice pratique

Créez une page HTML qui utilise Playfair Display pour le titre et Inter pour le texte :

Intégrez les polices avec la méthode <link> et display=swap
Déclarez une pile de polices de secours complète
Utilisez clamp() pour des tailles responsive
Limitez la largeur du texte à 65 caractères
Mesurez le temps de chargement des polices dans DevTools
Bonus : passez à l’auto-hébergement et comparez la vitesse

Guide : Utiliser les Web Fonts et Google Fonts correctement