Developer Tools
Text ToolsOutil de prévisualisation de polices
Prévisualisez n'importe quelle police Google avec du texte, taille, graisse et couleur personnalisés. Générez le code CSS d'importation instantanément. Outil gratuit en ligne.
Polices populaires
Style
Browser Support
Style Tags
216 fonts
Aperçu en direct
The quick brown fox jumps over the lazy dog
Aperçu de la police
Nom de la police :Roboto
Taille de la police:32px
Graisse de la police:400
Code CSS
CSS font-family :
font-family: 'Roboto', sans-serif;URL d'import Google Fonts :
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');Full CSS snippet
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
color: #1e293b;
}Outils associés
À propos de l'Outil de prévisualisation de polices
Comment ça fonctionne
- Entrez n'importe quel nom de famille Google Fonts ou choisissez dans la liste populaire
- La police est chargée dynamiquement via l'API Google Fonts dans votre navigateur
- Ajustez la graisse, la taille, la couleur et l'arrière-plan pour voir votre configuration idéale
- Copiez la déclaration CSS font-family ou l'URL d'import pour l'utiliser dans votre projet
- Passez entre les préréglages de texte (pangramme, alphabet, lorem ipsum) ou saisissez un texte personnalisé
Cas d'utilisation courants
- Choisir la bonne police pour un nouveau projet web
- Comparer l'apparence de différentes graisses de la même police à différentes tailles
- Générer l'extrait CSS d'import correct pour une Google Font
- Démontrer rapidement des choix de polices aux clients sans quitter le navigateur
- Vérifier le rendu des chiffres et symboles pour les tableaux de bord et interfaces riches en données
Questions fréquentes
Qu'est-ce que l'Outil de prévisualisation de polices ?
L'Outil de prévisualisation de polices vous permet de charger n'importe quelle famille Google Fonts, d'ajuster sa graisse, sa taille, sa couleur et son arrière-plan, de le prévisualiser avec un texte personnalisé, et de copier le code CSS d'importation — directement dans votre navigateur, sans rien installer.
Comment prévisualiser une Google Font ?
Saisissez le nom de la Google Font (ex. 'Playfair Display') dans le champ de recherche et cliquez sur 'Charger la police', ou cliquez sur un nom dans la liste des polices populaires. La police est récupérée depuis le CDN Google Fonts et affichée immédiatement dans la zone d'aperçu.
Puis-je utiliser n'importe quelle Google Font ?
Oui. Vous pouvez saisir le nom exact de n'importe quelle police disponible sur Google Fonts (fonts.google.com). L'outil construit l'URL API correcte et charge automatiquement toutes les graisses disponibles (100–900).
Quelles graisses de police sont prises en charge ?
L'outil demande les graisses 100 à 900 depuis Google Fonts. Si une police n'inclut pas une graisse spécifique, le navigateur rendra la graisse disponible la plus proche.
Comment copier le code CSS pour mon projet ?
Une fois une police chargée, faites défiler jusqu'à la section Code CSS dans le panneau de droite. Utilisez les boutons de copie à côté de chaque extrait pour copier la déclaration font-family, l'URL @import, ou le bloc CSS complet dans votre presse-papiers.
Quels exemples de textes sont disponibles ?
Six préréglages sont proposés : Pangram, Alphabet, Chiffres et symboles, Lorem Ipsum, un exemple de Titre, et un exemple de Paragraphe. Vous pouvez aussi saisir votre propre texte personnalisé dans le champ Texte personnalisé.
Cet outil stocke-t-il des données ?
Non. L'Outil de prévisualisation de polices est entièrement basé sur le navigateur. Il charge les polices via l'API publique Google Fonts et ne stocke rien sur aucun serveur. Votre texte personnalisé et vos paramètres n'existent que dans votre session de navigateur.
Puis-je changer la couleur du texte et l'arrière-plan ?
Oui. Utilisez les sélecteurs de couleur dans la section Couleurs pour choisir n'importe quelle couleur hexadécimale pour le texte et l'arrière-plan. C'est utile pour vérifier les ratios de contraste ou voir l'apparence d'une police sur des arrière-plans sombres.
Pourquoi une police échoue-t-elle à se charger ?
Le chargement d'une police peut échouer si le nom de la police est mal orthographié, si elle a été supprimée de Google Fonts, ou si votre réseau bloque les requêtes vers fonts.googleapis.com. Vérifiez le nom exact sur fonts.google.com et réessayez.
Cet outil est-il gratuit ?
Oui, l'Outil de prévisualisation de polices est entièrement gratuit. Les polices elles-mêmes sont servies par le CDN Google Fonts sous des licences open source — vérifiez la licence de chaque police sur fonts.google.com avant de l'utiliser dans un projet commercial.
Puis-je comparer plusieurs polices côte à côte ?
Vous pouvez rapidement passer d'une police à l'autre en utilisant les puces de polices populaires et observer comment le même texte change. Pour une comparaison formelle côte à côte, ouvrez l'outil dans deux onglets de navigateur avec différentes polices chargées.
Qu'est-ce qu'une déclaration CSS font-family ?
Une déclaration CSS font-family indique au navigateur quelle police utiliser, avec des alternatives. Exemple : font-family: 'Roboto', sans-serif; — si Roboto est indisponible, le navigateur utilise la police sans-serif par défaut du système.