Comment utiliser Google Fonts dans votre prochain projet de conception Web

Vous avez donc probablement entendu dire que Google propose des centaines de polices Web gratuites prêtes à être utilisées pour votre prochain projet. Mais comment les utilisez-vous sur votre site Web? Cet article vous expliquera les étapes à suivre pour les faire fonctionner sur votre site Web. Cela devrait prendre moins de 10 minutes!

Que sont les polices Google?

"Google Fonts a été lancé pour la première fois en 2010 en tant qu'initiative d'ingénierie pour faire avancer le Web et le rendre plus rapide." - Google Design

Google Fonts a été lancé en 2010, devenant rapidement la plus grande sélection de polices open source gratuite sur Internet. Toutes les polices Google sont gratuites pour un usage commercial et personnel. Le site Web Google Fonts permet à quiconque de sélectionner et d'utiliser rapidement différentes polices pour ses propres besoins de conception.

Qui utilise Google Fonts?

Tout le monde le fait! Graphistes, concepteurs UX, chercheurs, développeurs, concepteurs Web, blogueurs, gestionnaires de réseaux sociaux, entrepreneurs, artistes, étudiants, enseignants, photographes et bien d'autres. J'ai vu des polices Google utilisées sur des panneaux d'affichage, des affiches, des ponts de présentation, des invitations de mariage, des sites Web et des livres.

Qui crée les polices?

Google Fonts collabore avec les concepteurs de caractères, les fonderies de caractères et la communauté des créateurs du monde entier. Ces personnes et organisations conçoivent les polices que vous voyez sur Google Fonts. Par exemple, Łukasz Dziedzic est un concepteur de polices indépendant qui a conçu la police populaire Lato. Une fonderie de caractères nommée ParaType a conçu la police PT Serif.

Pourquoi Google se soucie-t-il des polices?

Chaque lien d'API Google Fonts sur un site Web donne à Google la possibilité de faire plus de data mining. Cela semble-t-il dégoûtant? Oui, mais je ne pense pas que cela devrait vous empêcher d'utiliser Google Fonts.

Une autre raison plus réconfortante pour laquelle Google se soucie des polices est qu'il souhaite rendre les polices Web open source accessibles au grand public. Ils veulent créer un site Web plus rapide, plus beau, plus facile à naviguer et à utiliser. Ils ont également lancé Google Fonts en 2010, lorsqu'un service comme celui-ci était très nécessaire, ils ont donc résolu un autre problème que nous avions sur Internet. #dontbeevil

Pourquoi devrais-je envisager de les utiliser?

Vous ne pouvez pas battre gratuitement. Ai-je raison? En plus d'être gratuit, vous devriez envisager d'utiliser Google Fonts dans votre prochain projet de conception Web, car…

  • Les polices sont faciles à mettre en œuvre sur votre site Web
  • Vous avez le choix entre plus de 850 polices (et ce n'est pas fini)
  • La qualité globale des polices continue d'augmenter
  • Les polices Google sont également téléchargeables pour une utilisation imprimée

D'accord, d'accord, d'accord! Voyons maintenant comment vous les utilisez.

Comment utiliser Google Fonts - étape par étape

1) Accédez au site Web de Google Fonts

Visitez le site Web de Google Fonts où vous pourrez choisir parmi 853 familles de polices et compter! Le site Web vous permet de filtrer les résultats par style de police, langues, popularité et poids. Google Fonts propose également de nouvelles polices si vous visitez la page "En vedette".

2) Recherchez les polices que vous aimez

Si vous avez un nom de famille de polices en tête, vous pouvez le rechercher.

3) Cliquez sur «+» lorsque vous êtes prêt à l'utiliser

Chaque famille de polices a un bouton plus dans le coin supérieur droit. Cliquez sur le bouton plus pour ajouter la famille de polices au «tiroir de sélection» qui apparaît en bas de l'écran.

4) Répétez les étapes 1 à 3 si vous recherchez plus d'une police à utiliser

5) Cliquez sur le "tiroir de sélection" pour afficher toutes les polices que vous avez choisies

Le «tiroir de sélection» est l'endroit où vous verrez toutes les polices que vous avez ajoutées. C'est là que vous trouverez le code à ajouter à votre site Web. Vous avez également la possibilité de télécharger les polices sur votre bureau.

6) Le «tiroir de sélection» est l'endroit où vous récupérerez le code que vous allez copier / coller dans le code HTML et CSS de votre site Web

Depuis le «tiroir de sélection», vous copiez le code à coller dans votre HTML et CSS. Pour que Google Fonts fonctionne sur votre site Web, vous devez avoir à la fois la famille de polices liée à l'API Google Fonts (dans le HTML) et vous devez avoir la famille de polices spécifiée (dans le CSS).

7) Ajoutez différents poids et styles de police si vous le souhaitez en cliquant sur l'onglet «personnaliser»

C'est votre dernière chance d'ajouter différents poids et styles de police à vos familles de polices avant de les ajouter à votre site Web. N'ajoutez que les poids et les styles de police dont vous savez avoir besoin, car plus vous ajoutez de polices, plus elles se chargeront lentement sur votre site.

8) Copiez le code HTML et collez-le dans votre site Web

D'accord, nous avons presque terminé! Il ne nous reste plus qu'à copier et coller le code HTML et CSS dans votre site Web. Tout d'abord, copiez le lien HTML dans la tête de votre document HTML.

9) Copiez la règle CSS et collez-la dans le fichier CSS de votre site Web

Enfin, nous devons également copier et coller les règles CSS dans votre fichier CSS. Si vous ajoutez une police Google à votre site Web, vous pouvez ajouter les règles de famille de polices CSS dans votre balise body. Sinon, vous devrez vous assurer que vous l'ajoutez aux bons éléments de vos fichiers CSS.

10) Enregistrez les deux fichiers (HTML et CSS) puis actualisez votre site Web et affichez la nouvelle police

N'oubliez pas de sauvegarder et d'actualiser!

Voilà! Vous avez implémenté avec succès votre première police Google sur votre site Web. Félicitations, vous codez. Il est juste de dire que les polices Google sont essentiellement…

Plus de lecture

  • «Reimagining Google Fonts» par Yuin Chien (Google Design)
  • «6 conseils pour une meilleure association de polices» par Hayden Mills (paire de polices)
  • "Choisir les polices Web: un guide du débutant" par Google Fonts

Merci d'avoir lu

N'hésitez pas à laisser un commentaire ci-dessous ou à me contacter sur Twitter pour toute question ✌️

De plus, je suis le créateur de Font Pair, qui vous aide à associer les polices Google. Consultez notre nouvelle publication Medium pour lire plus d'articles sur la typographie!