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.
Pour 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
Voyons 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
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.
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.