Top 40 des Google Fonts pour améliorer la conception de votre site web

Dans cet article, je veux vous montrer les 40 meilleures polices Google pour améliorer la conception de votre site web. Google fait tout, et a même créé ses propres polices, les « Google Fonts ». Je vais vous montrer ce qu’elles sont, lesquelles sont les meilleures et comment les combiner. À la fin de l’article, vous verrez également comment utiliser les meilleures polices de Google pour améliorer la conception de votre site web.

Que sont les Google Fonts et pourquoi les utiliser ?

Google Fonts est un catalogue de plus de 700 polices de caractères gratuites et open source. Cela signifie que vous pouvez utiliser n’importe quelle police du vaste catalogue de Google sur votre site web ou votre blog.

C’est une grande avancée compte tenu de la polyvalence qu’elle nous offre en termes de conception de pages web. Auparavant, seules quelques polices pouvaient être utilisées dans la conception de sites web, les « polices sûres » (Times New Roman, Arial, Andale mono…). Si ces polices étaient utilisées, il y avait un risque que le navigateur ne les affiche pas correctement.

Avant d’avoir cette possibilité, de nombreux concepteurs qui voulaient utiliser d’autres polices les ont mises en image. Ce n’est pas le meilleur positionnement et, heureusement, il n’est pas nécessaire de nos jours.

Les 40 meilleures Google Fonts pour améliorer la conception de votre site web

Alegreya

google fonts alegreya

L’un des plus populaires, parfait pour le corps du texte de toute publication ou contenu numérique. Vous pouvez le trouver en 6 versions différentes.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Alegreya
    • Corps : Source Sans Pro

Asap

google fonts asap

Cette police de caractères est appelée « dry-stick ». Il est doté de bords arrondis et est très propre.

  • Voir la typographie dans Google Fonts
  • Combinaison recommandée :
    • Titre : Flamenco
    • Coprs : Asap

Lato

google fonts lato

Lato est une police de caractères élégante et l’une des plus populaires dans les Google Fonts. Bois sec, avec 10 variantes et 5 poids, du plus fin (Thin), au plus gras (Black).

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Lato
    • Corps : Merriweather

Merriweather

google fonts merriweather

Merriweather est une police de caractères qui fonctionne très bien pour le corps du texte. Il fonctionne très bien lorsqu’il est combiné avec son compagnon Merriweather Sans.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Merriweather
    • Corps : Open Sans

Roboto

google fonts roboto

Créé par Christian Robertson, il s’agit d’une famille de sources très complète. Il existe plusieurs versions, mono, condensée et Slab ; cette dernière avec serif. La version normale est très similaire à l’Helvetica ou au Din. Parfait pour les gros titres dans leurs différents poids.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Roboto
    • Corps : Nunito

Raleway

google fonts raleway

Typographie créée par Matt McInerney et avec de nombreuses variantes. Il est parfait pour les corps de texte en raison de ses courbes ouvertes et arrondies, car il est beaucoup plus facile à lire. Il comporte jusqu’à 8 poids différents et leurs variations correspondantes en italique. Ils ont également créé une version en pointillés que vous pouvez voir et télécharger sur le web.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
  • Titre : Rallye
  • Corps : Roboto

Montserrat

google fonts montserrat

Montserrat est une police de caractères créée par Julieta Ulanovsky, qui s’est inspirée des affiches et des tentes typiques du quartier de Montserrat à Buenos Aires et a voulu créer cette police avec deux graisses différentes, régulière et grasse.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Montserrat
    • Corps : Cardon

Open Sans

google fonts open sans

Open sans est une police en bois sec conçue par Steve Patterson et lancée en 2011. Il a 5 poids différents, y compris les italiques. Cela fait de l’Open Sans l’une des polices de caractères les plus polyvalentes qui soient, car elle a de nombreuses applications. Dans le domaine de la conception web, elle est constamment considérée comme allant de pair avec l’inclusion des polices de Google dans WordPress et l’essor de la conception à plat.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Open Sans
    • Corps : Lora

Amaranth

google fonts amaranth

L’Amaranth est une police de caractères d’aspect moderne aux coins arrondis et courbés. Il a été conçu par le génie Todt, qui a cherché à améliorer sa lisibilité par des touches de structure cursive.

  • Voir la police dans Google Fonts :
  • Combinaison recommandées :
    • Titre : Amarante
    • Corps : Titillium Web

Gentium

google fonts gentium

Typographie Serif et caractères romains très élégants. Il a beaucoup de personnalité en soi et se combine très bien avec les typographies sans empattement, tant pour les titres que pour le corps du texte.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Open Sans
    • Corps : Gentium

Noto Sans

google fonts noto sans

Il s’agit d’une évolution de la police Droid, qui prend en charge plus de 30 langues. Il en va de même pour sa version Serif, c’est donc une police très pratique.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Montserrat (capitale)
    • Corps : Noto Sans

Ubuntu

google fonts ubuntu

Ubuntu a pris beaucoup de force et est de plus en plus appliqué sur de nombreux sites web. Il s’agit d’une police sans empattement qui a été modifiée manuellement pour améliorer sa lisibilité sur les écrans.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Ubuntu
    • Corps : Lora

Quicksand

google fonts quicksand

Police de caractères moderne sans empattement qui se distingue par ses extrémités complètement arrondies. Il intègre également différents poids et une variante en pointillés, pour des conceptions plus créatives.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Sables mouvants
    • Corps : EB Garamond

Droid Sans

google fonts droid sans

Droid Sans est une police sans empattement conçue par Steve Matteson. Il est optimisé pour être mobile, web et autres écrans.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Droïde sans
    • Corps : cabine

Signika

google fonts signika

Il a été initialement créé pour être utilisé dans la signalisation, mais il est applicable à tous les types de dessins en raison de son rythme et de sa lisibilité.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Signika
    • Corps : Open Sans

Josefin Slab

google fonts josefin slab

Josefin Slab est une police de caractères inspirée des tendances des années 1930 qui se sont distinguées par leurs formes géométriques. C’est une excellente police à utiliser pour les titres et les en-têtes, mais elle convient aussi parfaitement comme corps de texte.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Dalle Josefin
    • Corps : Josefin Sans

Vollkorn

google fonts vollkorn

Le Vollkorn est une fontaine avec un serif proéminent et corsé. Il a été conçu pour être discret et fonctionner dans tout type de publication écrite, que ce soit sur papier ou sur écran. Il est parfait pour les gros titres et possède différents poids, y compris les caractères gras et italiques.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Le Vollkorn
    • Corps : Exo

Bree Serif

google fonts bree serif

Il a été conçu en 2008 par Veronica Burian et Jose Scaglion. Cette police de caractères a été un succès dès le début. C’est une très bonne option à utiliser dans Headlines et se combine très bien avec les polices sans empattement comme Lato. Il est très esthétique et a fière allure même lorsqu’il est réduit en taille.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Bree Serif
    • Corps : Lora

Poppins

google fonts poppins

Poppins est un caractère géométrique sans empattement créé par Indian Type Foundry en 2014. Il est disponible en 5 poids différents, mais ne comporte malheureusement pas de variante en italique. C’est une police qui fonctionne beaucoup mieux sur les écrans, donc elle est parfaite pour la conception de sites web, où elle est très utilisée.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Poppins
    • Corps : Sintony

Hind

google fonts hind

Le Hind, comme le Poppins, a 5 variantes, et n’inclut pas non plus les italiques. Sa variante « grasse » est largement utilisée pour les titres et les rubriques dans la conception de sites web car elle est très lisible sur les écrans et les mobiles.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Hind
    • Corps : Open Sans

Playfair Display

google fonts playfair display

Il s’agit d’une police de caractères aux traits très contrastés, ce qui en fait une typographie moderne et visuelle très bonne pour les gros titres. Sa variante en italique est très belle, élégante et originale pour les titres et les sous-titres. Il n’est pas recommandé de l’utiliser dans le corps du texte car ses traits contrastés peuvent lui faire perdre une certaine lisibilité.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Montserrat
    • Corps : Playfair Display

Space Mono

google fonts space mono

Space Mono a de nettes influences du style typographique géométrique et se trouve en régulier et en gras, ainsi que ses variantes correspondantes en italique.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Nunito
    • Corps : Space Mono

Alegreya Sans

google fonts alegreya sans

Conçu par Juan Pablo del Peral, et disponible en 7 poids différents, avec leurs variations correspondantes en italique. Pour beaucoup, c’est l’une des meilleures polices de Google Fonts, et elle est de plus en plus utilisée sur le web.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Alegreya Sans
    • Corps : Open Sans

Lora

google fonts lora

Lora est une police Google Fonts disponible dans son mode normal et en gras, y compris les italiques correspondantes, qui ont une touche très calligraphique.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Istock Web
    • Corps : Lora

Domine

google fonts domine

Domine a été conçu par Pablo Impallari dans Il a été créé avec l’objectif principal d’être utilisé dans des textes sur le web, ils ont donc cherché un design qui privilégie la lisibilité.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Montserrat
    • Corps : Domine

Roboto Slab

google fonts roboto slab

Conçue par Christian Robertson, il s’agit d’une police à empattement gratuite de Google Fonts. Il a été créé pour être utilisé en combinaison avec son mode sans empattement, et contient 4 poids différents, mais n’inclut pas les italiques.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Dalle Roboto
    • Corps : Open Sans

Fira Sans

google fonts fira sans

Fira Sans est une police open-source créée par Erik Spiekermann et avec la contribution de Carrois Type Design. Au début, il n’a été créé que pour Firefox OS, mais plus tard, il a été publié en open source. Il est toujours en cours de développement et compte aujourd’hui 9 poids différents en italique, et une version monospace.

  • Voir la police dans la combinaison Google Fonts
  • Combinaison recommandée :
    • Titre : Fira Sans
    • Corps : Lato

Old Standard TT

google fonts old standard TT

Son design s’inspire des polices à empattement modernes de la fin des années 90. Il est disponible gratuitement sur Google Fonts en normal, en italique et en gras, mais malheureusement il n’y a pas de style italique en gras.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Cabine
    • Corps : Old Standard TT

PT Serif

google fonts PT serif

Cette élégante police Google de style serif a été conçue par trois designers russes en 2010. Il est disponible en version normale, en italique, en gras et en italique gras.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : PT Sans
    • Corps : PT Serif

Oswald

google fonts oswald

C’est actuellement l’une des sources condensées les plus utilisées dans les Google Fonts. Il a six poids, de l’extra-léger au gras.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Oswald
    • Corps : Roboto

Cabin condensed

google fonts cabin condensed

Un sans inspiré des polices de caractères d’Edward Johnston et d’Eric Gill, avec une touche de modernisme et disponible en quatre graisses.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Cabine condensée
    • Corps : Gentium

Abril Fatface

google fonts abril fatface

Il s’inspire des sources de titrage lourd utilisées sur les affiches publicitaires au XIXe siècle en Grande-Bretagne et en France. C’est une police de caractères avec beaucoup de personnalité.

  • Voir la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : April Fatface
    • Corps : Rallye

Dosis

google fonts dosis

Une police de caractères arrondie de la famille des sans serif. Il a commencé avec le style extra-léger et compte maintenant plus de six points jusqu’à l’extra-gras.

  • Afficher la police sur Google Fonts
  • Combinaison recommandée :
    • Titre : Dose
    • Corps : Open Sans

Oxygen

google fonts oxygen

La famille de polices Oxygen est créée dans le cadre du projet KDE, un bureau libre pour le système d’exploitation GNU + Linu. Disponible en trois styles : léger, régulier et audacieux.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Oxygène
    • Organisme : Source Sans Pro

Karla

google fonts karla

C’est l’un des caractères sans empattement les plus populaires, conçu par Jonny Pinhor, et il existe quatre variantes. Il est idéal pour donner une touche différente et minimaliste à votre site web.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Oswald
    • Corps : Karla

Pathway Gothic One

google fonts pathway gothic one

C’est un sans empattement très similaire à celui d’Oswald mais avec un dessin plus fin. C’est idéal pour les titres. Le seul inconvénient est qu’il n’est disponible qu’en une seule épaisseur.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Pathway Gothic One
    • Corps : Sanchez

Advent Pro

google fonts advent pro

Il s’agit d’une police de caractères sans empattement, au style moderne, spécialement conçue pour les sites web. Il est disponible en sept variantes et il est recommandé de l’utiliser surtout pour les sous-titres.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Advent Pro
    • Corps : Oxygène léger

Maven Pro

google fonts maven pro

Une fontaine avec une courbure et un mouvement uniques. Son design moderne s’adapte à tout contexte et est également très lisible.

  • Afficher la police dans Google Fonts
  • Combinaison recommandée :
    • Titre : Dalle Josefin
    • Corps : Maven Pro

Comment pouvez-vous utiliser ces polices Google sur votre site web ?

Si vous utilisez WordPress, vous n’aurez probablement aucun problème puisque la plupart des modèles intègrent les polices Google pour une utilisation en H1, H2, p, etc. Cependant, il est possible qu’aluna n’ait pas été incluse. Dans ce cas, vous pouvez utiliser la méthode « @font-face » pour utiliser d’autres polices Google. En gros, vous devez télécharger les polices dans différents formats sur votre serveur, puis placer un code CSS dans votre feuille de style.

Une autre méthode consiste à utiliser « @import ». Dans ce cas, au lieu de télécharger les polices de Google sur votre serveur, vous les appelez depuis Google. C’est très facile car Google Fonts vous donne la solution directe. Il suffit de cliquer sur @import pour trouver le CSS nécessaire. Vous devez le mettre sans le code de « style » qui apparaît au début et à la fin.

Outils de recherche et de test des polices Google

En plus du moteur de recherche propre à Google Fonts, avec plus de 800 familles de polices, il existe d’autres alternatives pour trouver et essayer votre police de caractères parfaite :

Type Hero

Avec cet outil, vous pouvez rechercher des polices Google, leur ajouter du texte et même une couleur pour visualiser leur aspect sur votre page WordPress.

Better Font Finder

Découvrez de manière interactive les typographies, disponibles dans les Google Fonts, grâce à cet outil conçu par Mattthew. Avec Better Font Finder, vous pourrez sélectionner les polices en fonction de leur similarité visuelle. Contrairement au vaste catalogue proposé par le moteur de recherche Google Fonts lui-même (plus de 800 polices), ce site ne comporte que 70 exemples.

Google Font Previewer pour Chrome

Il s’agit d’une extension de Google Chrome qui vous permet de visualiser l’aspect des polices directement sur votre site web. Il est très utile, surtout lorsque vous concevez votre page, de trouver rapidement une police Google Fonts et de la tester.

Beautiful web type

Il s’agit d’un vaste catalogue en ligne, une vitrine des meilleures polices, issues du répertoire Google des polices Web, appliquées à titre d’exemple. Pour savoir quelle police est utilisée, il suffit de cliquer dessus et vous serez dirigé vers le répertoire Google Fonts.

Retrouvez plus d’outils pour développer votre site internet :