Explorateur d'associations de polices

Qu'est-ce que Explorateur d'associations de polices ?

L'Explorateur d'associations de polices est un outil gratuit dans le navigateur destiné aux web designers, développeurs et créateurs de contenu qui veulent une combinaison soignée de titre et de corps sans fouiller des bibliothèques de polices. Deux sélecteurs indépendants et cherchables permettent de filtrer 48 Google Fonts sélectionnées par serif, sans, display ou mono et de choisir une police pour chaque rôle, tandis que des contrôles par rôle fixent la graisse, la taille, l'interligne et l'interlettrage. Un aperçu en direct affiche votre titre et votre paragraphe dans les vraies polices, et un bouton de mélange propose des associations aléatoires quand vous manquez d'inspiration. Quand cela vous convient, copiez le CSS généré dans le format de votre choix — une règle @import, une balise HTML link ou des imports de style Fontsource — et intégrez-le à une page de destination, un thème de blog, un diaporama ou un système de design.

Comment utiliser Explorateur d'associations de polices

1. Dans le sélecteur de titre, filtrez par serif, sans, display ou mono, tapez pour rechercher et cliquez sur une police pour la sélectionner.
2. Faites de même dans le sélecteur de corps pour choisir une police complémentaire pour le texte de paragraphe.
3. Ouvrez les réglages pour définir la graisse, la taille, l'interligne et l'interlettrage de chaque rôle.
4. Saisissez votre propre titre et une phrase dans le champ d'exemple, ou laissez-le vide pour le texte par défaut ; appuyez sur Mélanger pour des idées d'association aléatoires.
5. Choisissez le format de sortie — @import, <link> ou Fontsource — et copiez le CSS généré dans votre feuille de style ou votre projet.

Exemples

Titre : Playfair Display 700 · Corps : Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Format : <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Questions fréquentes

Comment choisir les deux polices ?

Chaque rôle a son propre sélecteur. Filtrez le catalogue par serif, sans, display ou mono, tapez une partie d'un nom de famille pour rechercher et cliquez sur un résultat pour le sélectionner. Le titre et le corps se choisissent indépendamment, et le bouton Mélanger sélectionne une paire au hasard pour vous.

Puis-je contrôler graisse, taille, interligne et interlettrage ?

Oui. Ouvrez les réglages pour définir la graisse, la taille en pixels, l'interligne et l'interlettrage (en em) séparément pour le titre et le corps. Chaque changement apparaît à la fois dans l'aperçu en direct et dans le CSS copié.

Quels formats de sortie puis-je copier ?

Trois : une règle CSS @import, une balise HTML <link> avec des indications preconnect, et des imports npm de style Fontsource (npm i @fontsource/… plus des lignes d'import par graisse). Les trois incluent les mêmes règles font-family, graisse, taille, interligne et interlettrage pour h1–h3 et body.

D'où viennent les polices et mon texte est-il privé ?

Lorsque vous choisissez une association, votre navigateur charge uniquement ces deux familles directement depuis l'API publique Google Fonts CSS sur fonts.googleapis.com — une requête tierce faite depuis votre navigateur, pas via nos serveurs. Votre texte d'exemple et vos réglages restent entièrement sur votre appareil.

Quelles polices sont incluses ?

Un ensemble sélectionné de 48 Google Fonts populaires parmi serif, sans-serif, display et monospace — dont Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono et d'autres.