Il existe 1052 familles de polices Google différentes disponibles gratuitement (au moment de la rédaction de cet article). Cela fait beaucoup de choix ! Il n’est donc pas étonnant que vous ayez besoin d’aide pour trouver cette aiguille dans une botte de foin avec une liste des meilleures polices Google.
Nous l’avons trouvé pour vous, et nous partagerons également quelques bonnes pratiques pour l’utilisation des polices Google dans WordPress.
Le choix d’une police est plus qu’un simple choix esthétique : il peut avoir un effet considérable sur les taux de rebond et de conversion de votre site, surtout si vous choisissez une police difficile à lire. Il est donc préférable de prendre un peu de temps pour choisir la famille de polices Google idéale pour votre site web, plutôt que d’utiliser la première police venue.
Si vous avez besoin d’encore plus de polices, consultez notre article sur plus de 50 polices modernes à utiliser sur votre site WordPress.
Pourquoi utiliser Google Fonts?
Il existe des milliers de dépôts de polices sur Internet, alors qu’est-ce qui rend les polices Google si spéciales ?
Tout d’abord, c’est gratuit ! De plus, les polices Google sont gérées et distribuées par Google, ce qui signifie que leur sécurité est garantie. Bien sûr, il existe de nombreux sites web douteux où vous pouvez télécharger des polices gratuites, mais qui sait ce que vous risquez d’attraper avec ces fichiers ?
La qualité des polices sur ces sites web peut aussi parfois être douteuse.
Google a sélectionné plus d’un millier de polices de haute qualité. Si vous n’êtes pas un graphiste ayant un œil parfait pour la typographie, c’est un choix plus sûr.
Deuxièmement, il n’y a pas de restrictions de licence alambiquées. Toutes les polices du catalogue Google Fonts sont open source et peuvent être utilisées gratuitement dans des projets commerciaux. Vous pouvez les télécharger ou les intégrer sur votre site, et vous pouvez même les utiliser dans des projets d’impression.
Bien qu’il n’y ait pas de licence unifiée, la plupart des polices du dépôt utilisent la licence Open Font. Licence Open Font.
Les autres « polices gratuites » sont rarement gratuites et s’accompagnent de toute une série de restrictions de licence déroutantes qui peuvent vous mettre dans de beaux draps si vous faites une erreur. Malheureusement, les polices Google ne sont pas livrées avec le même bagage.
Enfin, il est facile d’ajouter des polices Google à votre site web à l’aide de l’API Google Fonts. Vous pouvez également les télécharger individuellement et les téléverser sur votre serveur web via FTP/SFTP.
Bien que les polices Google aient tendance à être simples et peut-être pas aussi voyantes que certaines polices payantes, elles sont certainement meilleures que les polices sécurisées pour le web qui sont préinstallées avec les principaux systèmes d’exploitation, les mêmes polices que tout le monde a vues des milliers de fois auparavant.
Ce qu’il faut rechercher dans une police Google
S’il y a une chose que vous devez apprendre lors de la conception d’un site web, c’est comment choisir une police Google adaptée à votre projet. Une bonne typographie peut faire ou défaire votre site.
Ce détail peut sembler insignifiant, mais il peut faire la différence entre une personne qui quitte votre site prématurément et une personne qui y reste pour devenir un lecteur ou un client fidèle.
Le choix de la bonne police est une tâche que les graphistes passent des années à maîtriser, mais en gardant quelques principes à l’esprit, vous pouvez choisir une belle police pour votre site web.
- Correspondance avec votre marque : C’est peut-être l’aspect le plus important. Les meilleurs sites web ont une police qui met en valeur leur personnalité tout en étant lisible et en s’intégrant au design actuel. Par exemple, Apple et Iron Maiden utilisent des polices très différentes, mais elles correspondent toutes deux à leur marque.
- Lisibilité : Le deuxième principe le plus crucial est la lisibilité. Une police fantaisiste ou grunge peut certainement convenir à votre marque, mais si vos visiteurs ne peuvent pas la lire, ils s’empresseront de partir. Par conséquent, vos polices doivent être professionnelles et lisibles.
- Classification de police : Bien qu’il existe des centaines de façons de classer une police, voici les cinq principaux types de polices : serif, sans-serif, script, monospace et décoratif. Une police de type script ou serif est synonyme d’élégance, tandis que les polices monospaces sont populaires sur les sites techniques. La connaissance de ces classifications vous donnera un meilleur point de départ dans votre recherche.
- Police d’affichage ou police de corps : Les polices d’affichage sont destinées aux grands formats, aux en-têtes ou aux projets d’impression. Elles peuvent se permettre d’être moins lisibles dans l’intérêt d’un design unique. La directive principale des polices de corps est la lisibilité, car elles constitueront la majeure partie de votre site.
- Humeur et intention : Comme pour toute œuvre artistique, les artistes conçoivent des polices pour des ambiances et des contextes spécifiques. La plupart des polices sont accompagnées de notes expliquant comment elles ont été conçues et comment vous pouvez les utiliser. Utilisez-les pour décider si la police convient à votre projet.
Les 10 meilleures polices Google en 2024 (selon la sagesse des foules)
Alors, comment établir une liste des meilleures polices Google alors que tout cela est en grande partie subjectif ? Nous ne voulons pas que cette liste soit biaisée, nous allons donc nous baser sur les données pour établir une liste des polices Google les plus populaires.
Nous allons utiliser les analyses de Google Fonts pour nous fier à la sagesse des foules. Avec plus de 50 trillions de vues de polices au total, Google dispose d’une petite quantité de données à exploiter.
Ensuite, nous irons un peu au-delà des chiffres bruts de popularité et choisirons quelques polices HTML prometteuses qui gagnent en popularité.
Vous êtes prêts ? C’est parti !
1. Roboto
La police de choix de Kinsta, Roboto, est une police sans-serif de Christian Robertson que Google a développée comme police système pour Android. Elle est désormais très populaire, se décline en 12 styles différents et fait de nombreuses apparitions dans les statistiques de Google Fonts.
Par exemple, Roboto est la police la plus populaire. Mais Roboto Condensed est aussi la sixième police la plus populaire, et Roboto Slab fait aussi une apparition en douzième position !
2. Open Sans
Open Sans Condensed est une police très lisible commandée par Google et inspirée de son prédécesseur, Droid Sans. Google utilise Open Sans sur certains de ses sites web et sur ses publicités imprimées et en ligne. Open Sans Condensed, sa police sœur, occupe également la treizième place des polices les plus populaires sur Google Fonts.
3. Lato
Lato est un autre choix populaire de Łukasz Dziedzic. Elle a une sacrée histoire derrière sa conception, équilibrant des objectifs contradictoires, ce qui donne une police sans-sérif unique et légère.
4. Montserrat
Montserrat est une police sans-serif créée par Julieta Ulanovsky, qui vit dans le quartier éponyme de Montserrat, à Buenos Aires. Avec 18 styles différents allant du léger au lourd, vous avez l’embarras du choix.
5. Oswald
Oswald est une police sans-serif développée à l’origine par Vernon Adams. Elle a été conçue dans l’esprit du style gothique alternatif, comme en témoignent ses traits gras.
6. Source Sans Pro
Source Sans Pro est une police sans-serif créée pour Adobe et la première police open-source d’Adobe. Réalisée par Paul Hunt, son lettrage léger la rend propre et lisible.
7. Slabo 27px/13px
Slabo est une police serif développée par John Hudson de Tiro Typeworks. Cette police est spécifiquement conçue pour certaines tailles – soit 27px ou 13px, selon vos besoins.
8. Raleway
Avec 18 styles différents, Raleway est une autre police sans-serif, initialement créée par Matt McInerney. Si vous aimez Raleway et que vous recherchez quelque chose d’unique, Raleway Dots offre un style similaire avec une approche en pointillés qui peut fonctionner pour les gros titres.
9. PT Sans
PT Sans a été développées pour les caractères publics de la Fédération de Russie et, en tant que tel, comprend à la fois des caractères latins et cyrilliques. Il existe également plusieurs autres polices dans la famille PT, y compris quelques options avec serif.
10. Merriweather
Le nom de Merriweather évoque l’idée d’un design agréable, et c’est exactement l’intention de ses concepteurs. Bien qu’elle ne soit pas aussi populaire, Merriweather Sans est un projet jumeau qui se marie exceptionnellement bien avec elle.
Polices Bonus + les nouvelles venues
D’après les chiffres, les dix polices ci-dessus sont les polices Google les plus populaires. Mais le fait de n’afficher que les options les plus populaires ne rend pas service à d’excellentes polices émergentes qui n’ont pas été suffisamment exposées pour figurer dans les statistiques.
Voici quelques-unes de nos préférées qui n’ont pas fait une apparition au sommet de l’analyse.
11. Noto Sans / Serif
Noto est une police commandée par Google qui existe en version avec et sans-serif. Elle est régulièrement mise à jour et il existe aujourd’hui plus de 100 polices Noto, et d’autres sont en cours d’élaboration !
L’objectif de Noto est de couvrir tous les alphabets et caractères de diverses langues tout en harmonisant son design distinct à travers des centaines de familles de polices différentes. Ces dérivés comprennent les populaires Noto Sans KR et Noto Sans JP.
12. Nunito Sans
Nunito Sans est une option sans-serif dont la popularité augmente rapidement. Son utilisation a triplé entre 2018 et 2019, et elle ne fait que gagner en popularité chaque année.
13. Concert One
Concert One est un caractère grotesque arrondi qui constitue une excellente option pour les titres. Son design non conventionnel ne manquera pas d’attirer les regards.
14. Prompt
Prompt est une police sans-serif proposée par la société thaïlandaise de design de communication Cadson Demak. Elle est « loopless » (l’équivalent thaïlandais de sans-serif) et comprend des caractères thaïs et latins.
15. Work Sans
Work Sans est une police sans-sérif optimisée pour une utilisation sur écran. Les concepteurs recommandent d’utiliser les styles middleweight pour tout ce qui est compris entre 14px et 48px.
Comment créer les meilleures combinaisons de polices Google
Si vous pensiez qu’il était difficile de choisir une police dans Google Fonts, attendez d’essayer de les associer sur votre site ! Heureusement, ce n’est pas un problème que vous devez résoudre (sauf si vous le souhaitez). Vous pouvez utiliser plusieurs méthodes pour trouver les meilleures combinaisons de polices Google.
Tout d’abord, le site web de Google Fonts lui-même suggère des combinaisons populaires si vous faites défiler la page :
En outre, vous pouvez également utiliser un site comme Font Pair pour obtenir davantage de suggestions.
Meilleures pratiques pour l’utilisation de polices Google sur WordPress
Une fois que vous aurez trouvé les polices parfaites pour votre projet, voici quelques bonnes pratiques pour utiliser les polices Google sur WordPress.
Limitez le nombre de poids de police que vous utilisez
Certaines de ces polices – comme Montserrat et Raleway – sont livrées avec 18 poids de police différents. Bien que cela soit une bonne chose pour vous donner des options, vous ne voulez pas charger les 18 poids sur votre site WordPress car cela ralentira vos temps de chargement.
Il est très important de suivre cette directive !
Pour la plupart des polices, une bonne règle de base est d’utiliser trois poids au maximum :
- Regular (normal)
- Italic (italique)
- Bold (gras)
De nombreux sites WordPress que nous voyons aujourd’hui font même l’impasse sur l’italique et se contentent de deux poids de police différents.
Si vous intégrez vous-même les polices Google, vous pouvez choisir exactement les poids à inclure. Tout d’abord, consultez la page d’une police, puis cliquez sur Sélectionner ce style en fonction de celles que vous souhaitez.
Aujourd’hui, la plupart des thèmes WordPress comprennent des moyens faciles de choisir les polices Google et les poids que vous souhaitez utiliser. Mais tous les développeurs de thèmes ne sont pas axés sur les performances. Dans certains cas, il peut donc être préférable de désactiver les polices Google dans votre thème et de les ajouter vous-même.
Les polices variables commencent également à devenir populaires et sont prises en charge par tous les navigateurs modernes. Elles sont géniales car elles permettent de transformer un fichier de police avec des propriétés différentes. Google Fonts propose un grand nombre de polices variables, et vous pouvez même restreindre votre recherche à ces polices spécifiques.
Pensez à héberger localement les polices Google
Au lieu de diffuser les polices à partir du serveur de Google, vous pouvez également héberger les polices localement, ce qui offre des avantages en termes de performances. Toutefois, n’oubliez pas que la plupart des polices Google sont probablement déjà mises en cache dans les navigateurs des utilisateurs. Nous vous recommandons donc de procéder à des tests de performance.
Si vous utilisez une police premium autre que les polices Google, comme la police « Brandon » que nous utilisons sur notre site Kinsta, la meilleure solution consiste à l’héberger localement (et à la servir à partir de votre CDN). Pour en savoir plus sur ce sujet, consultez nos articles sur l’hébergement local des polices.
Choisissez une police qui sera mise à jour
Les polices sont comme les extensions et les thèmes WordPress : au fil du temps, elles sont mises à jour et améliorées afin de les rendre encore meilleures. Et bien que les enjeux soient loin d’être aussi terribles que ceux des extensions WordPress, il peut toujours être bénéfique de choisir une police qui reçoit des mises à jour régulières. Par exemple, la famille Noto de Google bénéficie de mises à jour régulières depuis 2014.
Comme la plupart des polices de cette liste sont populaires, il y a fort à parier que toutes les polices de cette liste seront régulièrement mises à jour et améliorées. Et si vous décidez de ne pas utiliser cette liste, il est toujours bon de s’assurer que la police que vous choisissez est suffisamment populaire pour attirer l’attention.
N’oubliez pas l’accessibilité
Selon l’Organisation Mondiale de la Santé, d’après les données recueillies en 2015, on estime que 253 millions de personnes vivent avec une déficience visuelle : 36 millions sont aveugles, et 217 millions ont une déficience visuelle modérée à sévère. En outre, le nombre de personnes présentant une forme de déficience a augmenté pour atteindre 2,2 milliards en 2021.
Lorsque vous utilisez les polices Google, vous pouvez contrôler leur apparence à l’aide de CSS, comme la couleur et la taille. N’oubliez pas de respecter les directives d’accessibilité aux contenus web (WCAG) 2.0. Vous serez ainsi assuré que votre contenu est facilement accessible à tous.
Le respect de ces directives rendra le contenu accessible à un plus grand nombre de personnes handicapées, y compris les personnes atteintes de cécité et de faible vision, de surdité et de perte d’audition, de difficultés d’apprentissage, de limitations cognitives, de limitation des mouvements, de troubles de la parole, de photosensibilité et de combinaisons de ces handicaps. – Directives d’accessibilité aux contenus web (WCAG) 2.0
Une directive essentielle est le contraste des couleurs. Notre police était un peu trop claire sur une ancienne version du site web de Kinsta, et les visiteurs ont fait part de leurs inquiétudes, car elle était difficile à lire. La dernière chose que l’on souhaite est de publier un contenu étonnant et qu’il devienne une contrainte pour les yeux des gens !
Vous pouvez utiliser un outil comme le Color Contrast Checker de WebAIM pour voir si les couleurs de vos polices de caractères répondent aux recommandations officielles. Par exemple, vous pouvez constater que les couleurs de nos articles de blog ont maintenant passé le test. 👍
Comment ajouter des polices Google à WordPress
Après avoir choisi une ou deux polices, l’étape finale consiste à les ajouter à votre site web. Grâce à Google Fonts, cette tâche est encore plus facile que d’habitude.
Supposons que vous souhaitiez placer une police sur votre site web. Dans ce cas, trois possibilités s’offrent à vous : installer une extension telle que Easy Google Fonts ou Google Fonts Typography, utiliser l’API de Google Fonts pour téléverser la police sur votre site, ou la télécharger manuellement et l’héberger sur votre site.
Si vous avez besoin de savoir comment changer vos polices dans WordPress, nous avons rédigé un guide détaillé pour vous aider.
Résumé
Les polices Google Fonts sont fantastiques et utilisées par des millions de sites. Elles rendent le web plus agréable, plus ouvert, plus rapide et plus accessible grâce à de solides principes de typographie et d’iconographie.
Pour garantir une meilleure expérience globale à vos visiteurs, nous vous recommandons de suivre les meilleures pratiques en matière de polices de caractères, comme la limitation du poids des polices, l’hébergement des polices en local (si nécessaire) et le respect des directives en matière d’accessibilité.
Maintenant, à vous de jouer – quelles sont vos polices et paires de polices préférées de Google Fonts ? Faites-le nous savoir ci-dessous dans les commentaires, et n’oubliez pas de lire notre guide approfondi sur les polices WordPress !
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Super article! Très bien expliqué et surtout très complet. Merci beaucoup pour les outils en ligne.