Sélection et utilisation d’une police de Google Web Font

Pour faire suite à l’article précédent concernant les font web, je vais revenir un peu plus en détail sur l’utilisation d’une police web en utilisant le service Google Web Fonts.

La première chose à faire est de se rendre sur le site de Google Web Fonts afin de sélectionner la ou les polices que vous souhaitez utiliser.

La page est composée de plusieurs parties :

  • Une partie centrale qui permet la comparaison des polices disponibles avec 4 modes :
    • Word : Comparaison par mot
    • Sentence : comparaison par phrase
    • Paragraph : comparaison par paragraphe
    • Poster : Affichage sous forme de « poster »

    Pour chaque mode, il est possible de configurer la taille, le texte (sauf en mode poster où le nom de la police est affichée) et le tri (popularité, date d’ajout, …).

  • Une zone de filtre sur la gauche
  • Une zone de gestion de votre collection de police. En effet, Une fois que vous avez trouvé la police qui vous plaît, il suffit d’ajouter la police à votre collection.

Page d'accueil de Google Web FontPour chaque police, plusieurs actions sous forme de liens/boutons :

  • Un lien qui ouvre la page d’explication permettant d’utiliser la police. Cette page est décrite dans la partie Use/Utilisation ci-dessous.
  • un lien permet d’accéder à la page concernant la police affichant les informations (description, auteur, licence), des exemples de texte utilisant la police et la liste des caractères de la police.
  • Le bouton d’ajout/suppression de la collection

Affichage d'un police dans Google Web FontVoyons comment gérer votre collection et les actions possibles.

Review / Comparaison

Une fois votre sélection effectuée, vous pouvez comparer les polices sélectionnées. Plusieurs modes de comparaisons sont disponible :

  • Specimen: 2 modes
    • Headline : Affiche les différents niveaux de titre avec la police
    • Paragraph : Affiche un paragraphe avec différentes tailles pour la police
  • Styles : Comparaison, pour une phrase donnée des différentes variantes d’une police (italique, gras, …)
  • Test Drive : Utilisation des polices dans le cadre d’une page d’exemple
  • Character Set : Comparaison cote à cote des caractères disponibles
  • Compare : Comparaison de 2 police l’une sur l’autre
  • Description : Affichage des informations (description, licence, auteur) de chaque police
Google Web Font : Comparaison en mode Specimen
Comparaison en mode Specimen
Google Web Font : Comparaison en mode Styles
Comparaison en mode Styles
Mode Test Drive de Google Web Font
Utilisation des polices dans une page test
Google Web Font : Comparaison en mode Character Set
Comparaison en mode Character Set
Google Web Font : Comparaison en mode Compare
Comparaison en mode Compare
Google Web Font : Comparaison en mode Description
Comparaison en mode Description

Use / Utilisation

La page est composée de plusieurs blocs :

  • une partie qui permet de sélectionner les polices de la collection à utiliser.
  • Sélection des jeux de caractères à inclure (latin, latin étendu, cyrillique, …)
  • Le code à utiliser pour inclure les police dans votre page. Il y a 3 façons d’inclure les polices : Link, @import et JavaScript.
  • Un exemple de code CSS pour l’utilisation de chaque police.

Google Web Font : Page d'explication de l'utilisation de polices

Divers

Il est à noter qu’il est possible de télécharger les polices de votre collection et d’enregistrer une collection sous la forme d’un marque page, ce qui peut être utile afin de sauvegarder/partager une collection.

Conclusion

Google met à disposition avec Google Web Fonts un outil complet et simple afin d’utiliser les polices web. Cela permet de facilement personnaliser un site web.
Adobe vient de sortir Adobe Edge Web Fonts, une alternative gratuite à Google Web Fonts, se basant sur typekit, la solution de web fonts payante d’Adobe.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *