Author(s) : Julien Wieczorek – Mehdi Lakehal – Hugo Grillat
WebFontConfig = { google: { families: [ ‘Stalinist+One::latin’ ] } }; (function() { var wf = document.createElement(‘script’); wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) + ‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’; wf.type = ‘text/javascript’; wf.async = ‘true’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(wf, s); })();
Les polices natives des navigateurs sont très pauvres, et peu originales (Arial, Helvetica, Times New
Roman, Verdana, Trebuchet…).
Dès qu’un webdesigner veut ajouter une typographie moins commune à son site internet plusieurs
solutions existent :
• Afficher son texte à partir d’une image, mais cette solution est lourde, et il faut refaire
l’image dès que le texte change.
La balise CSS @font-face depuis CSS 2 (1998) mais qui fut très peu incrémentée par les
•
navigateurs, avec de nombreux problèmes et l’obligation pour l’internaute de télécharger
préalablement la police.
• Utiliser un service web externe type Google Web Fonts ou Font Squirrel qui extrait un code
JavaScript pour pouvoir profiter de la balise @font-face
• Ou un utilitaire, sorte d’émulateur de la balise CSS, fonctionnant généralement sous Flash et/
ou JavaScprit
Sur cette dernière solution il existe plusieurs utilitaires :
• sIFR (Flash)
• sIFR Lite (Flash)
• FLIR ou Facelift (PHP + GD)
• Typeface.js (SVG/VML)
• Cufon (JavaScript)
L’outil proposé par Google : Google Web Fonts, est très complet et très simple d’utilisation. Ainsi
nous pouvons intégrer une typographie, un « compteur » nous montre la rapidité de chargement de
la police sur notre prochaine page, et le code nous ait donné en Html, @import et JavaScript.
Comment procéder pour mettre en place une typographie (police) sur un site :
Pour cela nous avons choisie de prendre Google Web Fonts.
1er Etape : Recherche d’une typo :
Susceptible d’être changé par la suite, nous avons pour l’instant pris la typo « Redressed
by Astigmatic »
2e Etape : Test de la typo (taille, etc ..) :
Permet de constater le rendu de la typo avec une phrase ou un mot, nous avons testé le mot « E-
Commerce »
3e Etape : Récupérer le code CSS :
Un code CSS est fournit à la fin de la manipulation pour qu’il soit mis directement sur le site (non
testé encore)
Pourquoi nous avons pris Google Web Fonts ?
• Un site web facile à prendre en main
Le site « Google Web Fonts » met à disposition un lot important de polices qui vont servir pour
construire son site.
• Intégration facile de polices sur un site web
Google offre la possibilité d’intégrer une ou des polices dans un site simplement en utilisant une ligne
de code (qui est le CSS) et qui est à placer dans le .
• Possibilité de télécharger les polices
Nous avons la possibilité comme sur DAFONT.COM de télécharger des polices qui peuvent par la
suite être réutilisé dans « Google Web Fonts » ou alors dans un autre comme « CUFON ».
Nous pouvons constater que beaucoup de polices ne comporte qu’un seul style, ce qui limite les
possibilités, notamment pour du print.
Le choix d’une police passe aussi par sa lisibilité à plusieurs résolutions d’écran. Les internautes
surfant avec Windows XP et n’ayant pas activé Clear Type par exemple, aurons du mal à distinguer
les polices web.