Google Web Fonts des polices pour le Web

Travailler avec les polices Web type Arial, Verdana, Times, Comic sans MS, peut parfois devenir ennuyeux et limité pour les Graphistes et Webdesigners…
Découvrez comment grâce à Google Web Fonts, il est facile d’importer de nouvelles polices, valables sur n’importe quel navigateur, et sur la plupart des supports tel que l’iPhone, l’iPad, les téléphones Androïd…

Google Web Fonts… un défilé de polices

Oubliez les images !

Jusqu’à lors lorsque vous deviez créer un site ou une application Web, vous étiez limité à quelques polices compatibles tel que Times et Arial. Afin d’utiliser d’autres polices, vous deviez créer des images, ce qui implique des inconvénients non négligeables. Les images, qui ne sont pas des éléments sémantiques, ne peuvent pas être traduites en d’autres langues automatiquement, et sont plus volumineuses en terme de taille de fichier que le texte. Le texte contenu dans une image ne peut pas être copié par les utilisateurs, ni lu par des lecteurs d’écran, et indexé par les moteurs de recherche !

Comment ça marche ?

Google Web Fonts disponible en ligne, contourne ce problème en vous permettant d’utiliser des centaines de polices différentes sur vos pages, qui seront affichées correctement par la large majorité des navigateurs modernes. Pour les utiliser rien de plus simple, il suffit d’insérer un bout de code HTML et CSS afin de voir apparaître de belles polices sur vos pages.

capture_d_ecran_2011-09-26_a_07.42.23.png

Au contraire du Times et de l’Arial, qui sont des polices installées sur tous les ordinateurs, les polices Web sont générées par une requête du navigateur (comme une image). En d’autres termes, vous pouvez forcer la machine du visiteur à utiliser des polices Web qui se comportent de la même façon que les textes écrits en Arial.

capture_d_ecran_2011-09-26_a_07.39.37.png

Comment faire ?

Choisissez une police parmi celles de la bibliothèque de Google Web Font disponible en ligne, qui s’enrichit régulièrement de nouveautés dans différents styles. Afin de l’utiliser, il faut insérer dans le

de son site Web le lien vers cette police afin de la rendre disponible en CSS.

En détails :

1- Choisissez votre font
Cliquez sur l’onglet “ Use this font ” (utiliser cette font pour vos pages Web)

capture_d_ecran_2011-09-26_a_07.48.01.png
capture_d_ecran_2011-09-26_a_07.45.55.png

2 – Cliquez sur la font

1- Copier le lien

2- Coller ce lien dans votre document HTLM dans l’entête entre les balises ... .

3- Dans votre feuille CSS, ajouter le styles aux éléments auxquels vous souhaitez aplliquer cette font.


h1 font-family: Calligraffitti, arial, serif;

Vos pages sont maintenant personnalisées avec de jolies polices et ne perdent rien de leur optimisation pour le Web !

0 réponses

Laisser un commentaire

Rejoindre la discussion?
N’hésitez pas à contribuer !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.