Les typos système ne suffisent plus. Pour être toujours plus créatifs, il nous faut jouer avec les couleurs, la disposition des éléments sur une page, mais aussi la typographie, les Fonts !
Il y a encore peu de temps, intégrer de nouvelles typos dans des compositions web était très fastidieux. Il fallait convertir la font dans différents formats afin qu’elle soit compatible avec les différents navigateurs, utiliser un code CSS toujours compliqué à retenir, et un résultat pas toujours au rendez-vous. Google a pensé a nous et nous simplifie la vie avec son service gratuit Google Webfonts.
A quoi ça sert ?
Google Webfonts vous donne simplement un accès à des centaines de typographies que vous pourrez télécharger sur votre ordinateur pour les tester dans vos maquettes, puis les intégrer via un code CSS ou JS fournit par le service.
Comment ça marche ?
Rendez-vous sur Google.com/webfonts et parcourez les centaines de typographies mises à disposition dans le catalogue. Il vous sera possible de :
- Changer la présentation de l’aperçu fonts (Word, Sentence, Paragraph, Poster)
- Avoir un aperçu d’un mot ou d’un texte dans les différentes typos (avec changement de la taille possible)
- Classer les typos (Serif, Sans-serif, …)
- etc … (je vous laisserais découvrir toutes les autres fonctionnalités :))
Une fois que vous avez trouvé une typo qui vous plait, vous pouvez alors l’ajouter à votre collection et continuer votre recherche. Une fois terminée, Google webfonts vous proposera alors de télécharger l’ensemble de la collection ou de l’utiliser sur votre site.
Utiliser une font sur mon site
Votre belle typo est maintenant sélectionnée, et vous allez simplement cliquer sur « Quick-use » (ou « Use this font » il me semble si vous avez créé une collection) et vous arriverez sur une page vous permettant de sélectionner l’épaisseur ainsi que l’encodage désiré. Une jauge vous indiquera aussi l’impact qu’aura la typo sur le chargement de votre page. A vous ensuite de sélectionner la méthode d’intégration que vous préférez :
- CSS standard (via une balise <link> à intégrer dans votre header)
- @import (à intégrer dans votre feuille de style CSS)
- javascript (j’aime moins cette méthode car elle créé des décalages au niveau de l’affichage : Tant que la typo n’est pas chargée, la font système de remplacement est alors utilisée en attendant et est souvent très différente de la typo voulue. Une fois que la typo désirée s’affiche, la mise en page est modifiée ce qui donne un effet visuel peu sympathique)
Il ne vous reste plus donc qu’à copier / coller la méthode choisie à l’endroit voulu, et de l’utiliser comme une typo classique dans votre CSS. That’s all !
