Google Fonts

Google Fonts offre des centaines de polices gratuites et optimisées pour le web.

Étapes d’intégration

Choisir vos polices sur Google Fonts
Copier le lien fourni dans votre <head>
Utiliser les polices dans votre CSS

Exemple pratique

1. Dans votre HTML (`<head>`)

<head>
  <!-- Autres balises meta... -->

  <!-- Google Fonts -->
  <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=Poppins:wght@400;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">
</head>

2. Dans votre CSS

body {
  font-family: 'Merriweather', Georgia, serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Helvetica', sans-serif;
}

Recommandations par public cible

Pour les 6-8 ans

Polices très lisibles, rondes, ludiques :

Texte : ‘Nunito’, ‘Quicksand’, ‘Comfortaa’
Titres : ‘Fredoka’, ‘Bubblegum Sans’, ‘Baloo 2’
Taille minimum : 18px pour le texte

body {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  line-height: 1.8;
}

h1 {
  font-family: 'Fredoka', sans-serif;
  font-size: 3rem;
}

Exemple interactif avec Google Fonts :

❌ Exemple introuvable : mm2b/cours-2-typographie/google-fonts

Pour les 8-12 ans

Polices lisibles avec un peu de personnalité :

Texte : ‘Open Sans’, ‘Lato’, ‘Raleway’
Titres : ‘Montserrat’, ‘Poppins’, ‘Bebas Neue’
Taille minimum : 16px pour le texte

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
}

Aperçu du style :

Le Mystère du Château Hanté

Max et ses amis ont découvert un vieux château abandonné au sommet de la colline. Des lumières étranges apparaissent la nuit dans les fenêtres. Vont-ils oser explorer ce lieu mystérieux ? Le style est équilibré entre lisibilité et caractère.

Pour les ados

Typographie plus travaillée :

Texte : ‘Lora’, ‘Merriweather’, ‘Source Sans Pro’
Titres : ‘Playfair Display’, ‘Oswald’, ‘Roboto Condensed’
Taille minimum : 16px pour le texte

body {
  font-family: 'Lora', serif;
  font-size: 16px;
  line-height: 1.7;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

Aperçu du style :

Échos d’un Futur Incertain

Dans un monde où la technologie a dépassé l’humanité, une jeune hackeuse découvre un secret qui pourrait tout changer. Entre thriller psychologique et science-fiction, cette histoire explore les limites de notre identité numérique. La typographie élégante et sobre renforce l’atmosphère mature du récit.

Bonnes pratiques

Combien de polices utiliser ?

Maximum 2 : une pour les titres, une pour le texte. Plus = confusion visuelle.

/* ✅ Bon : 2 polices complémentaires */
:root {
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

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

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

Charger uniquement les graisses nécessaires

Ne chargez pas toutes les variantes (100-900), seulement celles que vous utilisez :

<!-- ❌ Mauvais : charge toutes les graisses (lourd) -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap">

<!-- ✅ Bon : charge seulement 400, 600, 700 -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap">

Performance : preconnect

Ajoutez toujours les preconnect pour améliorer la vitesse de chargement :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>