Outil d'aperçu & d'association de polices
Parcourez, prévisualisez et comparez des polices pour votre prochain projet. Choisissez parmi les polices système et les Google Fonts populaires, puis personnalisez grâce aux contrôles en temps réel de taille, graisse, hauteur de ligne et interlettrage. Testez des associations police de titre + police de corps côte à côte et générez du code CSS prêt à l'emploi, le tout dans votre navigateur et sans inscription.
Browse system fonts and Google Fonts, preview with custom text, and compare font pairings side-by-side. Generate ready-to-use CSS code - all running locally in your browser.
Font Browser
40 fontsPreview
Inter
The quick brown fox jumps over the lazy dog.
24px / 1.5 lh / 0.0px ls · Loading...
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet">
font-family: 'Inter', sans-serif;
Fonts are loaded from Google Fonts CDN for accurate preview rendering. System fonts work offline. All search, filtering, and code generation runs locally. Google Fonts are licensed under the SIL Open Font License - free for commercial use.
Your font selections and settings are automatically saved.
Pourquoi utiliser notre outil d'aperçu & d'association de polices ?
- Aperçu en direct avec tous les contrôles : prévisualisez n'importe quelle police avec une personnalisation en temps réel : ajustez la taille (8-128px), la graisse (100-900), la hauteur de ligne et l'interlettrage, et activez l'italique. Saisissez votre propre texte pour voir exactement le rendu dans votre design. Compatible avec les polices système et Google Fonts grâce au chargement instantané des web fonts.
- Association de polices côte à côte : testez des combinaisons police de titre + police de corps côte à côte, avec des contrôles indépendants pour chaque police. Activez le mode comparaison pour affiner les associations de votre projet. Idéal pour choisir des polices complémentaires pour des sites web, une identité de marque ou des supports imprimés.
- CSS prêt à l'emploi et code @font-face : générez du code CSS prêt pour la production pour chaque police et association. Copiez les règles @import, les balises <link>, les déclarations CSS font-family ou le code @font-face complet, le tout formaté et prêt à coller dans votre projet. Aucun codage manuel nécessaire.
- Jeu de caractères et détails de la police : consultez le jeu complet de caractères de chaque police, avec majuscules, minuscules, chiffres, ponctuation et caractères spéciaux. Voyez la catégorie de la police, les graisses disponibles et le code CSS suggéré. Toutes les données sont intégrées : aucun appel à une API externe n'est nécessaire.
Qui utilise l'outil d'aperçu & d'association de polices ?
- Design et développement web : prévisualisez des polices pour vos projets web avec des contrôles de texte, de taille et de graisse en direct. Testez des combinaisons de polices de titre et de corps avant de figer un design. Générez les balises @import et <link> prêtes pour vos fichiers HTML et CSS.
- Identité de marque et création de logos : comparez des associations de polices pour vos projets d'identité de marque. Testez le rendu d'un nom de marque avec différentes graisses et différents styles. Prévisualisez la typographie de marque avec du vrai texte de marque plutôt qu'un lorem ipsum générique.
- Création de contenu et blogging : les blogueurs et créateurs de contenu trouvent la combinaison de polices parfaite pour leur site. Prévisualisez le rendu du texte de corps à une taille de lecture et choisissez une police de titre complémentaire qui correspond au style de votre contenu.
- Prototypage de design UI/UX : les designers testent rapidement leurs choix typographiques pour les interfaces utilisateur. Ajustez l'interlettrage et la hauteur de ligne pour garantir une lisibilité optimale sur différentes tailles d'écran. Copiez les déclarations CSS directement dans votre prototype.
- Design éditorial et impression : prévisualisez l'apparence des polices sur des supports imprimés. Testez des associations serif et sans-serif pour les titres et le corps du texte. Ajustez tailles et graisses selon les exigences de lisibilité propres à l'impression.
- CSS et développement front-end : les développeurs front-end explorent des options de polices sans quitter le navigateur. Générez un code CSS propre et formaté pour chaque sélection de police. Utilisez la sortie CSS @font-face pour des polices auto-hébergées ou les liens vers le CDN Google Fonts.
Foire aux questions
L'outil inclut des polices système (préinstallées sur votre appareil, comme Arial, Helvetica, Georgia ou Times New Roman) et des Google Fonts populaires (comme Roboto, Open Sans, Lato, Montserrat, Merriweather, Playfair Display, Fira Code, etc.). Les Google Fonts sont chargées depuis le CDN de Google pour un rendu d'aperçu fidèle.
Activez le mode comparaison pour afficher deux polices côte à côte avec des contrôles indépendants pour chacune. Choisissez une police de titre à gauche et une police de corps à droite, ou comparez deux polices pour le même usage. Chaque panneau dispose de ses propres contrôles de taille, graisse, hauteur de ligne, interlettrage et texte personnalisé.
Pour chaque police, l'outil génère une règle @import pour les fichiers CSS, une balise <link> pour les documents HTML, une déclaration CSS font-family avec les valeurs de repli adaptées et un bloc CSS complet reprenant tous vos réglages. En mode association, vous pouvez copier le CSS des deux polices.
Les Google Fonts sont sous licence SIL Open Font License (OFL), qui autorise un usage commercial et personnel gratuit : sites web, applications, supports imprimés et identité de marque. Les polices système ont leurs propres licences. Vérifiez toujours la licence précise de la police pour votre usage.
Les polices système fonctionnent entièrement hors ligne. Les Google Fonts nécessitent une connexion internet pour être chargées depuis le CDN de Google lors de l'aperçu. Le navigateur de polices, la recherche et le filtrage fonctionnent hors ligne, car les métadonnées des polices sont intégrées à l'outil.
La graisse va de 100 (fin) à 900 (noir). Les graisses courantes sont 400 (normal), 700 (gras) et 300 (léger). Toutes les polices n'incluent pas toutes les graisses : l'outil n'affiche que celles disponibles pour la police sélectionnée.
La vue du jeu de caractères affiche l'ensemble des caractères d'une police, organisé en majuscules, minuscules, chiffres, ponctuation et symboles. Elle vous aide à vérifier si une police prend en charge les caractères dont vous avez besoin pour votre projet.
L'interlettrage (tracking) ajuste l'espace entre les caractères. Un interlettrage serré peut rendre les titres plus cohérents, tandis qu'un interlettrage plus large peut améliorer la lisibilité du texte courant. L'outil permet de le régler de -2px à +5px.
Oui. Vos sélections de polices, le texte personnalisé, la taille, la graisse, la hauteur de ligne et le mode comparaison sont automatiquement enregistrés dans le localStorage de votre navigateur. Aucune donnée n'est jamais envoyée à un serveur ni stockée à l'extérieur.
Copiez la règle @import et collez-la en haut de votre fichier CSS, ou copiez la balise <link> et ajoutez-la dans le <head> de votre HTML. La déclaration CSS font-family peut s'appliquer à n'importe quel élément. Pour des polices auto-hébergées, utilisez le bloc CSS @font-face complet.