Google Fonts : L'outil pour télécharger gratuitement des polices d'écritures et des icônes

Google Fonts est un outil gratuit qui permet de télécharger des polices d'écritures et des icônes. Ces éléments typographiques sont « open source » et peuvent donc être utilisées pour des projets personnels et commerciaux. De plus, l'outil dispose d'une API pour intégrer instantanément des polices d'écriture sur un site web. 

Google fonts

Google Fonts a connu 3 changement de nom depuis sa sortie :

  • 2010 : Google Web Fonts
  • 2012 : Polices du répertoire de polices de Google
  • 2013 : Google Fonts

 

Google Fonts vous offre un choix étendu pour choisir votre typographie avec plusieurs styles, variantes et famille de police d'écriture. Vous êtes prêt à télécharger des polices d'écritures et les intégrer sur votre site web ? Découvrez l'outil qui vous fera gagner un temps précieux.

Comment rechercher une police sur Google Fonts ?

Si vous souhaitez créer un logo, Google Fonts est idéal car il permet de trouver très rapidement une police d'écriture.

 

Sur le filtre de recherche de Google Fonts, il est possible de définir les règles graphiques des typographies à afficher sur les résultats de recherche. Vous pouvez choisir des options tels que le style des caractères, les variantes, les graisses disponibles..

 

Trouver la police de votre logo est donc facile avec le filtre de Google Fonts.

 

C'est idéal pour affiner vos recherches et gagner du temps. Si par exemple, vous souhaitez une police d'écriture orientée vers une signature, alors il vous faudra choisir "Handwriting" comme famille de police. Cela permettra d'avoir les bons résultats en un instant et de vous éviter de scroller et de naviguer entre un mélange de styles...

Interface de Google fonts - rechercher une police

Vous pouvez utiliser le filtre situé dans la partie gauche de la page pour trouver les polices qui correspondent à vos besoins. La section des catégories de ce filtre contient une liste de styles et de familles spécifiques. Vous pouvez choisir d'afficher toutes les polices de la catégorie ou de restreindre votre recherche en choisissant un sous-ensemble d'options dans chacune d'elles.

La recherche instantanée

Indiquez le nom de votre marque directement sur la barre de recherche pour que le texte soit automatiquement généré sur la page. Si vous souhaitez trouver rapidement une police pour votre projet, vous pouvez utiliser la fonction de recherche instantanée.

Rechercher instantanée sur Google Fonts

Celle-ci vous permet de rechercher des polices en tapant le nom de la marque que vous utilisez. Le texte sera automatiquement généré sur la page et vous pourrez choisir la police que vous souhaitez utiliser en toute simplicité.

Filtrer les résultats

Vous pouvez effectuer votre sélection de polices en appliquant différents critères dans le filtre de recherche, puis parcourir la liste qui s'affiche afin d'affiner vos choix. Par exemple, vous pouvez appliquer un filtre pour les empattements et parcourir ensuite toutes les polices pour n’utiliser que ce type de typographie.

Filtrer les typographies par catégorie sur Google Fonts

Les filtres avancés vous offrent aussi l'occasion d'affiner plus encore vos résultats en choisissant la taille, la hauteur, l'angle d'inclinaison ou la hauteur X de la police.

Filtrer les typographies par propriété sur Google Fonts

Comment utiliser Google Fonts sur son site web ?

Pour télécharger une police de Google Fonts, il vous suffit de cliquer sur le bouton "Télécharger" situé sur le côté droit de la page. Les polices sélectionnées seront ensuite téléchargées dans un fichier .zip.

Tuto - télécharger une police sur google fonts

Cette fonction permet de télécharger les fichiers de la police sur votre ordinateur, hors vous aurez peut-être besoin de l’intégrer sur votre site web. Google Fonts propose plusieurs fonctionnalités pour que votre site Web fonctionne correctement sur n'importe quel appareil. Il s'agit notamment du redimensionnement automatique du texte, qui est très utile pour les mises en page réactives, puisqu'il permet de s'assurer que votre contenu s'affiche correctement. Pour s'assurer que vos polices ont un bon rendu sur les appareils dotés d'écrans haute résolution rétina, Google Fonts propose des polices créées spécifiquement pour s'afficher correctement sur ces écrans. Celles-ci ont été optimisées, notamment au niveau de leur poids, pour qu'elles se chargent rapidement.

 

Astuce : Vous pouvez également utiliser l'API de rendu rapide (désactivée par défaut, mais facilement activable) qui accélère le chargement de votre site web.

Utiliser Google Fonts sur WordPress

Le plugin Easy Google Fonts est une excellente option pour intégrer facilement des milliers de polices de caractères open source sur votre site Web WordPress sans aucune connaissance de code informatique.

Extension sur WordPress compatible avec Google Fonts

Pour ajouter une police à WordPress, il vous suffit de suivre les étapes suivantes :

 

  1. Rendez-vous sur : https://fr.wordpress.org/plugins/easy-google-fonts/
  2. Cliquez sur "Télécharger" et ensuite sur "Installer maintenant"
  3. Une fois l'installation terminée, cliquez sur "Activer"
  4. Cliquez sur Apparence dans WordPress, et choisissez Typographie
  5. Ajoutez ensuite une police d'écriture de Google Font
Tuto Easy Google Fonts - Installer une police dans apparence

Ajouter votre police en HTML

Pour ajouter une police sur votre site en HTML, vous pouvez suivre les étapes suivantes :

  1. Allez sur https://fonts.google.com/ et choisissez une police
  2. En bas de la page, cliquez sur "Ajouter à la collection"
  3. Allez dans votre compte et téléchargez votre nouvelle collection
  4. Vous pouvez maintenant accéder facilement à cette police dans n'importe quel projet ou application web qui utilise du CSS en l'important avec une simple ligne de code ci-dessous :

 

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

 

Conseil : Ouvrez une fenêtre incognito avant de télécharger votre collection pour éviter de mélanger différents comptes.

 

Il est aussi possible d'utiliser les polices Google Fonts en HTML directement en les intégrant à votre site Web en utilisant l'API de Google.

Autres outils pour trouver une police d'écriture