Meilleures polices pour sites web : 30 Google Fonts gratuites en situation réelle

Les meilleures polices pour sites web sont lisibles en petite taille, se chargent vite et collent à la marque : Inter ou Geist pour les sites produit, Source Serif 4 ou Newsreader pour la lecture, Rubik ou Nunito pour les commerces locaux. Voici 30 polices Google Fonts gratuites présentées en direct, avec licences, axes variables et CSS à copier.

Mis à jour le 13 octobre 2026

Voici 30 polices gratuites de Google Fonts qui tiennent la route sur de vrais sites web, classées selon l'usage qui leur convient le mieux. Chacune est présentée ci-dessous dans un titre, un paragraphe et un bouton, avec sa licence, l'indication qu'il s'agit ou non d'une police variable, les graisses disponibles, une pile de polices de secours et un extrait prêt à copier. Les informations ont été vérifiées en octobre 2026 dans le catalogue Google Fonts et dans les fichiers de licence du dépôt Google Fonts.

Choix rapides

• SaaS ou application : Inter ou Geist pour tout, ou Plus Jakarta Sans pour une landing page plus chaleureuse.
• Blog ou publication : Source Serif 4 ou Newsreader pour le texte courant, avec une sans serif pour la navigation.
• Commerce local : Rubik, Nunito ou Work Sans, lisibles sur un téléphone et accueillantes.
• Marque haut de gamme ou classique : Playfair Display ou EB Garamond pour les titres, avec une sans serif discrète pour le texte courant.
• Nombreuses langues : Noto Sans.

Essayez votre propre texte

Saisissez du texte ci-dessous pour remplacer le texte d'exemple dans tous les aperçus de cette page. Les polices se chargent depuis Google Fonts lorsque vous ouvrez cette section ; en attendant, chaque aperçu affiche sa pile de secours, qui est aussi ce que voient les visiteurs pendant un instant, le temps qu'une police web se télécharge.

Les 30 polices en un coup d'œil

Les 30 polices sont publiées sous la SIL Open Font License 1.1, qui autorise l'usage commercial, l'intégration sur des sites web et l'auto-hébergement, et vous permet de modifier les polices tant que vous ne vendez pas les fichiers de police seuls et que vous ne réutilisez pas les noms de police réservés pour des versions modifiées. Un petit nombre de familles Google Fonts utilisent d'autres licences libres : certaines sont sous Apache License 2.0 (par exemple Permanent Marker et Special Elite) et la famille Ubuntu utilise l'Ubuntu Font Licence. Vérifiez toujours la licence affichée sur la page d'une famille sur fonts.google.com avant de la mettre en ligne.

<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Merriweather", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Lora:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lora", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Playfair Display", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "EB Garamond", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Fraunces", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Newsreader:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Newsreader", Georgia, "Times New Roman", serif;

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

/* CSS */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

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

/* CSS */
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

Comment charger une police Google Fonts

Placez ces lignes dans le <head> de votre page, avant votre propre feuille de style. Les deux indications preconnect permettent au navigateur d'ouvrir tôt les connexions vers l'hôte de la feuille de style et vers l'hôte des fichiers de police ; les fichiers de police sont servis depuis un autre domaine et récupérés en mode CORS, c'est pourquoi la seconde indication porte crossorigin.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Source+Serif+4:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

Lire l'URL css2

• family=Inter:[email protected] demande une plage de graisses à une police variable. Réduisez la plage à ce que vous utilisez ; le navigateur télécharge quand même un fichier par sous-ensemble.
• family=Lato:wght@400;700 demande deux graisses statiques précises. Pour les familles statiques, chaque graisse indiquée correspond à un fichier de plus.
• ital,wght@0,400..700;1,400..700 ajoute les styles italiques. Les noms d'axes s'écrivent par ordre alphabétique, minuscules avant majuscules.
• Répétez family= pour charger plusieurs familles en une seule requête.
• display=swap définit font-display: swap dans les règles @font-face renvoyées : le texte s'affiche immédiatement dans la police de secours et bascule à l'arrivée de la police web, au lieu de rester invisible.
• text=Hello renvoie un fichier ne contenant que ces caractères, ce qui est utile pour un mot de logo composé dans une police que vous n'utilisez nulle part ailleurs.

Options de font-display

Auto-hébergement

Comme ces polices sont sous licence libre, vous pouvez servir les fichiers depuis votre propre domaine plutôt que depuis celui de Google. Les raisons de le faire : une connexion tierce en moins, un contrôle total de la mise en cache, et la confidentialité, puisque les requêtes vers les serveurs de Google envoient l'adresse IP du visiteur à Google, ce que certains propriétaires de sites européens évitent. Les façons de le faire :

• Téléchargez la famille depuis sa page sur fonts.google.com, convertissez ou conservez les fichiers WOFF2, et écrivez vos propres règles @font-face.
• Dans un projet JavaScript, installez la famille depuis Fontsource (par exemple npm install @fontsource-variable/inter) et importez-la dans votre fichier d'entrée.
• Les projets Next.js peuvent utiliser next/font/google, qui télécharge les fichiers au moment du build et les sert depuis votre propre domaine.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;      /* the variable range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

En auto-hébergement, préchargez uniquement le fichier dont votre texte au-dessus de la ligne de flottaison a besoin, avec <link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>. Précharger plusieurs polices les met en concurrence avec vos images et vos scripts.

Notes sur les polices variables

Une police variable est un fichier unique qui contient une plage continue sur un ou plusieurs axes, au lieu d'un fichier par graisse. 28 des 30 polices présentées ici sont variables ; Poppins et Lato sont statiques.

• La graisse (wght) se contrôle avec la propriété font-weight habituelle, et n'importe quel nombre de la plage fonctionne : font-weight: 650 est valide.
• La largeur (wdth), proposée ici par Roboto, Open Sans, IBM Plex Sans, Noto Sans, Archivo et Merriweather, correspond à font-stretch exprimé en pourcentage, par exemple font-stretch: 85%.
• La taille optique (opsz), présente dans Inter, DM Sans, Source Serif 4, Newsreader, Merriweather et Fraunces, ajuste la forme des lettres selon la taille à laquelle elles sont composées. Les navigateurs l'appliquent automatiquement à partir de la taille de police, car font-optical-sizing vaut auto par défaut. Demandez l'axe dans l'URL (par exemple family=Inter:opsz,[email protected],100..900) pour l'obtenir.
• Les axes personnalisés, comme SOFT et WONK de Fraunces, se règlent avec font-variation-settings: "SOFT" 100, "WONK" 1;. Utilisez plutôt les propriétés standard pour la graisse, la largeur et l'inclinaison lorsqu'elles existent, car les valeurs de font-variation-settings ne se combinent pas d'une règle à l'autre.
• Un fichier variable est plus lourd que n'importe quelle graisse statique seule. Il devient rentable dès que vous utilisez environ trois graisses ou plus, et quand vous voulez des graisses intermédiaires pour un réglage fin.

h1 { font-weight: 780; font-stretch: 90%; }
.lede { font-weight: 350; }
.fun-heading { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; }

Polices web-safe et piles de polices système

Les polices « web-safe » sont celles installées sur presque tous les ordinateurs Windows et Mac, si bien qu'elles ne demandent aucun téléchargement. Elles ne sont pas garanties sur Android, Linux ni sur tous les iPhone, c'est pourquoi une pile de polices se termine toujours par une famille générique comme sans-serif ou serif.

Une pile de polices système va plus loin et utilise la police d'interface propre à chaque système d'exploitation : San Francisco sur les appareils Apple, Segoe UI sur Windows, Roboto sur Android et généralement Noto ou une autre police par défaut sous Linux. Elle ne coûte rien à charger et a un rendu natif. Voici les piles que nous recommandons au moment de la rédaction :

/* Sans: the operating system's interface font */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

system-ui est pris en charge par tous les grands navigateurs actuels. -apple-system et BlinkMacSystemFont ne servent qu'aux anciens navigateurs sur les appareils Apple et peuvent être supprimés si vous ne les prenez pas en charge. ui-serif et ui-monospace ne sont pas reconnus par tous les navigateurs, c'est pourquoi chaque pile continue avec des polices nommées. Les polices emoji se trouvent à la fin pour que les caractères emoji s'affichent en couleur.

Ce paragraphe est composé avec la pile sans serif système : il affiche donc la police d'interface de votre propre appareil.

Notes sur les performances

• Utilisez moins de familles et de graisses. Chaque graisse statique, chaque italique et chaque famille supplémentaire est un fichier de plus. Deux familles, ou une famille variable avec son italique, suffisent à la plupart des sites.
• Préférez WOFF2. C'est le format de police web le plus compressé et tous les navigateurs actuels le prennent en charge. Google Fonts le sert automatiquement.
• Créez des sous-ensembles par langue. La feuille de style Google Fonts découpe déjà chaque famille en sous-ensembles avec unicode-range, si bien qu'une page uniquement en anglais ne télécharge que le fichier latin. Faites de même en auto-hébergement.
• Réduisez le décalage de mise en page au basculement. Si la police de secours et la police web n'ont pas la même largeur, le texte se réorganise à l'arrivée de la police. Choisissez une police de secours aux proportions proches, ou ajustez-la avec size-adjust, ascent-override et descent-override dans une règle @font-face de secours. next/font et certains outils de build génèrent ces valeurs pour vous.
• Ne masquez pas le texte. Sans font-display: swap ou optional, les navigateurs peuvent n'afficher aucun texte pendant un court moment, le temps que les polices se téléchargent, ce qui retarde le moment où la page devient lisible.
• Mesurez, ne devinez pas. Faites passer votre page dans un test en laboratoire avant et après avoir changé de polices. Notre guide sur PageSpeed Insights explique quels indicateurs les polices influencent.

Suggestions d'associations de polices

Associez des polices nettement différentes (une serif avec une sans serif, ou une police de titrage large avec une police de texte sobre) qui partagent quelque chose, comme une hauteur d'x ou une ambiance proches. Limitez-vous à deux familles. Ces combinaisons n'utilisent que des polices de cette page :

Pour essayer d'autres combinaisons côte à côte, utilisez l'outil d'association de polices. Pour des couleurs adaptées à votre typographie, consultez les palettes de couleurs pour sites web, et pour des mises en page prêtes à l'emploi qui utilisent ces polices, parcourez les composants de section hero.

Questions fréquentes

Quelle est la meilleure police pour un site web ?

Il n'existe pas une seule meilleure police, mais Inter, Source Sans 3 et Open Sans sont des choix fiables pour le texte courant, car elles restent nettes en petite taille. Pour les titres, choisissez une police avec plus de caractère, adaptée à la marque, comme Playfair Display, Fraunces ou Space Grotesk.

Les Google Fonts sont-elles gratuites pour un usage commercial ?

Oui. Toutes les familles de Google Fonts sont sous licence libre, principalement la SIL Open Font License 1.1, certaines sous Apache License 2.0 et sous l'Ubuntu Font Licence. Les trois autorisent l'usage commercial sur les sites web, dans les applications et en impression. Vérifiez la licence sur la page de chaque famille avant de l'utiliser.

Combien de polices un site web doit-il utiliser ?

En général une ou deux familles. Une configuration courante en utilise une pour les titres et une pour le texte courant, ou une seule famille avec différentes graisses pour les deux. Chaque famille et chaque graisse supplémentaires ajoutent des fichiers que le navigateur doit télécharger.

Qu'est-ce qu'une police variable ?

Une police variable est un seul fichier de police qui contient une plage continue de styles le long d'axes comme la graisse, la largeur ou la taille optique. Au lieu de charger des fichiers séparés pour le regular, le medium et le bold, vous chargez un seul fichier et pouvez utiliser n'importe quelle graisse de sa plage.

Que sont les polices web-safe ?

Des polices déjà installées sur presque tous les ordinateurs Windows et Mac, comme Arial, Verdana, Georgia et Times New Roman, qui ne demandent donc aucun téléchargement. Elles ne sont pas garanties sur tous les téléphones ni sur tous les systèmes Linux : terminez donc toujours une pile de polices par une famille générique comme sans-serif.

Faut-il auto-héberger les Google Fonts ?

Vous pouvez, puisque les licences le permettent. L'auto-hébergement supprime une connexion vers un domaine tiers, vous donne le contrôle de la mise en cache et évite d'envoyer les adresses IP des visiteurs à Google. Le chargement depuis Google Fonts est plus simple et gère les sous-ensembles pour vous. Dans les deux cas, utilisez WOFF2 et font-display: swap.

Texte du titre

Le nom de votre entreprise ou votre accroche

Texte du paragraphe

Une phrase de votre propre page d'accueil

Libellé du bouton

Réserver

Taille du titre : {n}px

Réinitialiser les exemples

Commencer gratuitement · Sans carte bancaire

Voir aussi: Guides

• Bibliothèques d'icônes SVG gratuites comparées
• Enregistrement BIMI
• Bing Places for Business
• Exemples Bootstrap 5 avec leurs équivalents Tailwind
• Clé API Brave Search
• Design web brutaliste
• Sites web avec blog d'entreprise
• Objets d'e-mail professionnel qui se font ouvrir

Produit

• Créateur de sites IA
• Notre créateur de sites IA à $2M installé chez vous
• Entreprise
• Documentation API

Pour qui

• Pour les agences
• Pour les indépendants
• Pour les hébergeurs
• Pour les plateformes SaaS
• Pour les startups
• Services financiers
• Solutions pour la santé

Fonctionnalités

• Éditeur par glisser-déposer
• SEO et analyses
• Image de marque personnalisée
• Tableau de bord client
• Facturation revendeur

Ressources

• Blog
• Centre d'aide
• Outils gratuits pour les entreprises
• Free UI Components
• Modèles
• Collections de modèles
• Exemples de sites
• Guides
• Comparatifs
• Alternatives
• Les meilleurs
• Avis
• Guides des tarifs
• Glossaire et guides
• Intégrations
• Développeurs
• Benchmark
• Windows App

Entreprise

• À propos
• Tarifs
• Postuler au programme partenaires
• Nous contacter
• Carrières
• Sécurité
• Politique de confidentialité
• Conditions d’utilisation

Plan du site