Testeur de Polices

Aperçu des associations Google Fonts, espacement et styles.

Configuration typographique

Police du titre

Police du corps

Taille du titre36px

Épaisseur du titre

Taille du corps16px

Épaisseur du corps

Combinaisons populaires

Tech modernePoppins + InterÉditorial classiquePlayfair Display + LoraCorporate audacieuxMontserrat + Open SansMonospace épuréJetBrains Mono + RobotoActualités chaleureusesMerriweather + Lato

Export de code CSS

/* CSS Integration */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;700&display=swap');

h1.custom-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
}

p.custom-body {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 16px;
}

Comment ça marche

Choisissez des Google Fonts à associer et à prévisualiser.
Saisissez votre propre texte dans l'aperçu modifiable en direct.
Ajustez la taille, la graisse et l'espacement pour tester la typographie.
Exportez le CSS pour utiliser l'association dans votre projet.

À quoi ça sert

Essayer une association de police titre/corps avant de s'engager.
Prévisualiser le rendu d'un vrai texte dans une police.
Obtenir le CSS pour intégrer une association Google Fonts.

Bon à savoir

Il charge les polices depuis Google Fonts, donc prévisualiser une police la récupère chez Google (le seul endroit où cet outil n'est pas totalement hors ligne).
Le rendu peut légèrement différer selon les systèmes d'exploitation et les navigateurs.

Questions fréquentes

Utilise-t-il mon propre texte ?

Oui, l'aperçu est modifiable, vous pouvez donc coller de vrais titres et paragraphes au lieu d'un texte factice.

Puis-je obtenir le CSS ?

Oui, il exporte le CSS pour intégrer l'association Google Fonts choisie dans votre site.

Est-ce totalement hors ligne ?

Presque, tout s'exécute dans votre navigateur, mais prévisualiser une Google Font récupère le fichier de police chez Google. Aucun texte que vous saisissez n'est téléversé.

Outils associés

Visionneuse DXF

Palette de Couleurs

Convertisseur de Couleur

Générateur de Box Shadow CSS

Vérificateur de Contraste