Google Fonts
Typographie moderne

Plus de 1 900 familles de polices gratuites pour donner du style à vos projets web ! Apprenez à intégrer et utiliser Google Fonts dans vos pages CSS.

Qu’est-ce que Google Fonts ?

Google Fonts est une bibliothèque gratuite de polices web optimisées, hébergées sur les serveurs de Google et faciles à intégrer dans vos projets.

Démonstration des polices

  • Police système par défaut :

    AVENGERS - Les héros les plus puissants

  • Google Font - Inter :

    AVENGERS - Les héros les plus puissants

  • Google Font - Poppins :

    AVENGERS - Les héros les plus puissants

  • Google Font - Orbitron (tech) :

    AVENGERS - Les héros les plus puissants

  • Google Font - Playfair Display (élégant) :

    AVENGERS - Les héros les plus puissants

Avantages de Google Fonts

  • Gratuit et open source Toutes les polices sont libres d’utilisation
  • Performance optimisée CDN mondial, compression automatique
  • Intégration simple Une ligne de code suffit
  • Compatible partout Tous navigateurs et appareils

La bibliothèque en chiffres

  • 1 900+

    Familles disponibles

  • 550+

    Familles variables

  • 180+

    Sous-ensembles d’écriture

  • 2010

    Année de lancement

Chiffres relevés le 14 août 2026 sur fonts.google.com/metadata/fonts, la source de la bibliothèque elle-même. Un sous-ensemble (subset) est un jeu de caractères — latin, grec, cyrillique… — et non une langue.

Choisir la police parfaite

Guide étape par étape pour trouver et sélectionner la police idéale pour votre projet.

Étapes de sélection sur fonts.google.com

Interface Google Fonts

Google Fonts

Inter

  • Inter

    + Select

    The quick brown fox jumps over the lazy dog.

    18 styles Geometric Sans serif

  • Poppins

    + Select

    The quick brown fox jumps over the lazy dog.

    18 styles Geometric Sans serif

Selected families

Inter

Regular 400, Bold 700

Get embed code

Processus de sélection

  1. Allez sur fonts.google.com
  2. Utilisez les filtres (catégorie, propriétés)
  3. Tapez votre texte pour prévisualiser
  4. Cliquez sur « Select this style »
  5. Choisissez les variantes (weights)
  6. Copiez le code d’intégration

Critères de choix

  • Lisibilité — facile à lire sur tous supports
  • Cohérence — correspond au style du site
  • Variantes — différents poids disponibles
  • Performance — pas trop lourde
  • Compatibilité — support des caractères spéciaux

Test avec votre contenu

AVENGERS - Assemblons-nous !

Testez toujours avec votre contenu réel.

Les quatre familles

Les noms en italique ne sont pas chargés sur cette page : ils s’affichent dans votre police de repli. Allez les voir sur fonts.google.com.

Méthodes d’intégration

3 façons d’intégrer Google Fonts dans vos projets : link HTML, @import CSS et API.

Le cache partagé entre sites n’existe plus

On lit encore que la police est déjà en cache parce qu’un autre site l’a chargée. Ce n’est plus vrai : depuis le partitionnement du cache HTTP (Chrome 86, octobre 2020, puis Firefox et Safari), chaque site a son propre cache. Google sert son CSS avec l’en-tête cache-control: private. L’argument « réutilisation entre sites » est donc à oublier ; les autres avantages restent.

Projet Avengers avec Google Fonts

Transformons votre page Avengers avec les bonnes polices Google Fonts !

Exemple complet : page Avengers stylisée

Code complet

html 

<!-- Google Fonts pour projet Avengers -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">

HTML — dans le <head>

css 

/* Variables pour les polices */
:root {
    --font-hero: 'Orbitron', monospace;
    --font-body: 'Inter', sans-serif;
}

/* Corps de page */
body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: white;
}

/* Titre principal AVENGERS */
.hero-title {
    font-family: var(--font-hero);
    font-weight: 900;
    font-size: 3rem;
    color: #FFD700;
    letter-spacing: 0.2em;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

/* Noms des héros */
.hero-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.5rem;
    color: #FFD700;
}

CSS — styles Avengers

Rendu final

AVENGERS

Les plus puissants héros de la Terre

Accueil Héros Pouvoirs

  • Iron Man

    Tony Stark - Génie, milliardaire, playboy, philanthrope.

  • Captain America

    Steve Rogers - Le premier Avenger, super-soldat.

  • Orbitron 900 - Titre principal tech/futuriste
  • Inter 600 - Noms des héros, moderne et lisible
  • Inter 400 - Texte principal, optimal pour la lecture

Combinaisons recommandées

À éviter

Erreurs courantes

  • Trop de polices différentes (3+ polices)
  • Polices illisibles (trop stylisées pour le corps)
  • Trop de variantes de poids (ralentit le site)
  • Oubli des polices de fallback

Exemple de ce qu’il ne faut pas faire

  • Texte illisible en Bangers
  • Mélange incohérent de polices
  • Trop de polices décoratives

Performance et optimisation

Techniques avancées pour charger vos polices rapidement sans impacter l’expérience utilisateur.

En-têtes relevés le 14 août 2026 sur fonts.googleapis.com et fonts.gstatic.com, pour Inter 400 en sous-ensemble latin.

Resource hints optimisés

html 

<!-- 1. Préconnexion prioritaire -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 2. Préchargement critique -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

<!-- 3. Chargement normal -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

HTML — configuration optimale
  • preconnect — établit la connexion DNS/TCP/SSL en avance
  • preload — charge le CSS critique en priorité haute
  • display=swap — évite le texte invisible pendant le chargement

Font Loading API (JavaScript)

javascript 

// Chargement progressif avec fallback
if ('fonts' in document) {
    document.fonts.load('400 16px Inter').then(() => {
        document.body.classList.add('fonts-loaded');
    });
}

// Timeout de sécurité
setTimeout(() => {
    document.body.classList.add('fonts-timeout');
}, 3000);

JavaScript — contrôle avancé

css 

/* Police par défaut */
body {
    font-family: system-ui, sans-serif;
}

/* Police chargée */
body.fonts-loaded {
    font-family: 'Inter', system-ui, sans-serif;
}

CSS — états de chargement

Avantages : contrôle total, analytics, progressive enhancement.

Checklist performance Google Fonts

Et le RGPD ?

Tout ce qui précède fait charger la police depuis les serveurs de Google. Ce détail technique a des conséquences juridiques, et il faut les connaître avant de mettre un <link> dans le site d’un client.

Ce que le navigateur envoie à Google

Pour télécharger la police, le navigateur du visiteur ouvre une connexion vers fonts.gstatic.com. Google reçoit alors son adresse IP, sa page de provenance et sa configuration de navigateur — sans qu’il ait rien demandé, et avant tout consentement.

Ce que disent les tribunaux et la CNIL

  • Le tribunal régional de Munich I a jugé le 20 janvier 2022 (affaire 3 O 17493/20) que l’intégration dynamique de Google Fonts violait le RGPD, et a condamné l’éditeur du site à 100 € de dommages et intérêts.
  • Après l’arrêt Schrems II, la CNIL considère qu’un transfert de données personnelles vers un service états-unien exige une base légale et des garanties : une police décorative ne les fournit pas.
  • La solution reconnue est simple : héberger la police sur son propre serveur. Le navigateur ne contacte alors aucun tiers.

La solution : héberger la police soi-même

Les polices de Google Fonts sont sous licence libre : rien n’interdit de les servir depuis son propre site. Le paquet npm @fontsource les distribue famille par famille, avec les @font-face déjà écrits.

bash 

npm install @fontsource-variable/inter

Terminal — installer la police

css 

/* Cet @import est du CSS natif : il charge un fichier local, installé
   par npm. Rien à voir avec l'@import de Sass, déprécié — voir la page
   « Sass & SCSS ». Ici, aucune requête ne part vers un serveur tiers. */
@import '@fontsource-variable/inter/index.css';

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

CSS — l’importer dans sa feuille

Cette page le fait

Les polices que vous voyez ci-dessus — Inter, Poppins, Roboto, Playfair Display, Orbitron — sont servies par ce site, pas par Google. Ouvrez l’onglet Réseau de vos outils de développement et rechargez : aucune requête ne part vers fonts.googleapis.com ni vers fonts.gstatic.com.

Que retenir

Projet scolaire ou prototype
Le <link> Google Fonts fait le travail, et c’est ce que vous rencontrerez partout.
Site en production
Auto-hébergez : c’est une ligne de npm, et la question juridique disparaît.
Dans les deux cas
Sachez lire les deux, parce que vous verrez les deux.

Google Fonts est acquis

Vous savez maintenant comment choisir, intégrer et optimiser Google Fonts pour créer des sites web avec une typographie professionnelle et performante.

  • 🔤 Sélection

    Choisir la police parfaite

  • 🔗 Intégration

    3 méthodes maîtrisées

  • ⚡ Performance

    Optimisation avancée

  • 🎨 Design

    Combinaisons réussies

Continuer avec le CSS Explorer Google Fonts

Compétences acquises

  • Link HTML
  • @import CSS
  • API avancée
  • Resource hints
  • Variables CSS
  • Performance
  • Auto-hébergement

Les autres pages CSS