Vu les commentaires enthousiastes à cette news (ex : merci google, depuis le temps que j’attendais ça, le web avance), je me pose des questions sur le niveau technique des commentateurs, tant la solution de google est faible et surtout en retard. En effet, le support des typo comme le propose google est disponible depuis… Internet Explorer 4. Le dernier navigateur à s’y être mis est firefox 3.5, mais depuis sa sortie il est admis que le suport des typos non système en HTML est maitrisé et efficace. Google n’apporte strictement rien avec sa “font API”, si ce n’est un effet de buzz.
Voici les différents inconvénients de la technique google :
- Une bibliothèque de typo très limitée (18 typos non exclusives)
- Une compatibilité sur les navigateurs imparfaite
- Une fausse simplicité du code qui e fait appelle d’autres portions de codes
- l’utilisation de Javascript (pas de JS, pas de typo)
- Les typos hébergées par google
- Un appel au site de google à chaque fois qu’une typo est demandée
En fait le principe est le même que quand vous appelez jQuery chez google au lieu de l’héberger chez vous par exemple.
Vous pouvez faire très facilement ce que propose google, et même bien mieux, avec plus de facilité
- Utilisez le code CSS @font-face, compatible sur tous les navigateurs du marché (IE 4+, firefox 3.5+, safari, safari mobile iphone ipad, Chrome, Chrome lite android, Opéra… Comme vous le voyez c’est très bien implémenté et très robuste)
- Il sera fonctionnel même avec le JS désactivé
- Vous avez accès à toutes les typos que vous souhaitez (y compris à celle que vous avez créé exprès pour votre site) et non pas à une dizaine (pourvu que leur licence le permette)
- La typo est hébergée sur votre serveur
- le code nécessaire est très simple
- C’est une implémentation standard qui ne vous oblige pas à dépendre d’une entreprise tierce pour le rendu de votre site
Je suis assez déçu que google joue les chevaliers blancs sur ce coup alors qu’il ne fait que compliquer la tâche des gens, les obligent à passer par leur serveur et n’encourage pas les standard. Le seul point positif c’est peut être que comme ça, la technique va être connu et que les gens vont enfin utiliser des typos non standard dans les sites web.
Si la technique vous intéresse, voici quelques ressources vous permettant d’inclure de la typo non standard en html :
- Des typos open sources gratuites sous licence SIL (dont certaines utilisées dans la bibliothèque google. Je vous recommande chaudement la célèbre inkboyfont en licence SIL :D (aperçu)
- Des typos gratuites sur un site très bien fait, avec des packs prêt à l’emploi
- un outil vous permettant de transformer une typo existante en typo compatible tous navigateurs
- Une fonderie spécialisée dans les typos web ready
- Les licences typos les plus connues (Meta, Din) disponibles pour le web
Tout ce dont vous avez besoin pour que ça marche c’est une typo, et ce malheureux bout de code dans votre CSS:
@font-face { font-family: 'matypo'; src: url('matypo.ttf'); src: local('matypo.ttf'), url('matypo.woff') format('woff'), url('matypo.ttf') format('truetype'); }
la dernière ligne est là pour assurer une compatibilité totale “bulletproof” si vous avez plusieurs formats de typo
Voilà, c’est tout ce dont vous avez besoin !! Vous appelez la typo une seule fois dans votre CSS, et ensuite vous l’incluez dans votre code comme si c’était une typo système.
Vous n’avez quand même pas besoin de google pour ça non ? Si la réponse était “oui”, il serait temps de vous mettre à jour techniquement
1 De Diti - 23/05/2010, 14:58
Les typos de Google ont l’immense avantage d’être « websafe », comparé à la quasi-totalité des typos existantes ailleurs. En effet, j’ai eu à développer un site pour un client qui voulait une police personnalisée (pas de nom précis, mais quelque chose qui fasse classe, en serif) ; or, la solution a finalement été abandonnée : le résultat était parfait sur Mac et Linux (qui gèrent bien l’anticrénelage), mais hideux sur Windows, quelle que soit la police. Parce qu’elles n’étaient pas optimisées pour tous les systèmes, alors que les polices de Google le sont.
2 De Inkboy - 23/05/2010, 17:16
C'est faux, les polices "de google" ne sont pas plus "websafe" que d'autres, puisque ça ne sont pas les typos "de google" mais des typos opensources dispo pour tous. Google ne fait pas de magie, il fat exactement pareil qu'un @fontface (d'ailleurs C'EST un fontface dans du JS).
Le tout est de choisir des typos de qualité, mais ça n'est pas propre à google.
J'ajoute que sur les nombreux tests que j'ai mené je n'ai jamais vu de typo vraiment différente d'une plateforme à l'autre, et pourtant j'ai testé sur des navigateurs et des systèmes aussi éloignés que win/IE6 et ipod/safari mobile. Peut être n'a tu pas utilisé le format adéquat, ou peut être que la typo déconnait je ne sais pas, quoiqu'il en soit google ne règlera pas le problème, mais le choix d'une bonne typo oui.
3 De CAD - 23/05/2010, 21:03
Pour appuyer ce que tu dis, le site http://www.fontsquirrel.com/fontfac... propose bien mieux que Google, téléchargement des différentes versions de polices pour tous les navigateurs + le CSS. Ca prend 10 secondes de l'installer au lieu de 5 pour Google.
Et pour répondre à Diti, les polices sont également pré-sélectionnées dessus, et il y en a bien plus.
Au moins ça aura fait connaître @font-face
4 De Inkboy - 23/05/2010, 21:04
Ou, un peu comme je dis dans mon article en filant le lien vers fontsquirrel quoi Merci quand même ^^
5 De stuffk - 23/05/2010, 21:39
Passer par les serveyrs de google permet aussi, et surtout une economie de bande passante...
6 De STPo - 24/05/2010, 13:34
Pour aller plus loin, Éric Daspet (le pape de perf web FR pour ceux qui dorment dans un abri anti-atomique) décortique ici le pourquoi du comment c'est faiblard techniquement : http://docs.google.com/document/pub... (oui c'est sur un Google Doc, ironique n'est-il pas)
7 De Pixelastic - 25/05/2010, 12:50
Hmm, j'ai pas l'impression que Js soit nécessaire. Toutes les fonts s'affichent correctement même en le désactivant sur cette page : http://code.google.com/webfonts
Ce sont juste des appels @font-face qui au lieu de chercher sur le serveur vont chercher sur le CDN de Google. Ca permet des requetes en moins sur son propre serveur (utile pour limiter le nombre de requetes concurrentes) et surtout l'avantage du CDN est que ça se charge très rapidement et aide à supprimer le flickering causé par l'application des fonts avec un réseau un peu faiblard.
Effectivement, le buzz est porté sur la "révolution" Google, mais ils n'inventent rien, ils proposent juste un CDN (comme ils font avec les ajax.googleapis.com). C'est un bon début, il manque juste plus de fonts dans leur liste.
Edit : Je viens de lire l'article d'Eric Daspet ainsi que le lien qu'il pointe. Effectivement utiliser un CDN n'est pas la solution miracle et a un coup en terme de dns lookup, etc. Savoir si vous devez en utiliser un sur votre site ou non est à réfléchir posément, les deux approches ont leurs avantages/inconvénients.
8 De Clot - 29/05/2010, 13:46
Ah bah j'ai quand même envie de me réjouir du lancement de ce Google font API, puisque ça nous vaut cet article sans lequel j'ignorerais encore tout de la possibilité d'utiliser des typos non-standard dans un site web
Merci pour l'article et pour les liens très intéressants
9 De Inkboy - 29/05/2010, 14:13
oui, c'est d'ailleurs le seul avantage : j'ai vu une tonne de commentaires qui disaient "ha enfin blabla" alors qu ela possibilité existe depuis un moment. Je ne sais pas ce qui empéchait les gens désireux de mettre des typos non standard de se renseigner :D ; au moins ça a eu le mérite de mettre cette possibilité en lumière.
10 De Mael - 02/06/2010, 16:56
Je reprends le commentaire de Diti, parce que j'ai eu le problème, avec une typo de grande qualité, mais qui était abominable dans IE.
J'ai fini par comprendre que l'antialiasing de Windows avait un paramètre supplémentaire pour l'affichage dans IE : il augmente le "hinting" de la fonte pour éviter tout crénelage.
Seulement sur certaines polices, cela a un effet destructeur, ça crame les bords en supprimant des pixels.
Deux solutions : ouvrir la police dans fontforge ou fontlab et changer les paramètres du hinting (pas d'équivalent du terme en français), ou, si vous utilisez fontsquirrel, cocher la case "remove hinting". Magique !!
Pour les CDN, une solution idéale est de mettre le sien propre en place, par exemple en utilisant amazon S3, sinon sur un espace de votre propre serveur. Le tout est de séparer distribution du site et distribution des polices (voire du JS, et certains le préconisent pour les CSS). Celui de google n'est pas infaillible, d'ailleurs j'ai eu très souvent des problèmes de disponibilité de l'API jQuery.
Par contre pour des petits sites en hébergement mutualisés, tant pis pour le flickering, faut s'en accommoder.
11 De Saita - 28/07/2010, 15:16
Bonjour, je suis toute nouvelle dans cet univers et je vais peut etre dire une betise mais pour moi, la grande révolution de cette API ets que je n'ai pas besoin d'avoir les fonts d'installée sur mon ordi pour les voir.J
'ai testé plusieurs autre solutions tels que les kit proposés par Squirell mais impossible de les faire marcher sans installer la font sur mon ordi...
Après, si je me trompe, je serais plus qu'enchantée de le savoir et de pouvoir enfin mettre la police que je veux sans avoir à la técharger sur mon ordi..mais tout simplement l'héberger sur un site pour que tout le monde y ait accès (téléchargement en cache si je ne m'abuse).
Voilà !
Saita
12 De Inkboy - 29/07/2010, 11:10
@Saita : c'est le principe oui oO'
En ce sens google n'apporte rien, tu peux le faire avec n'importe quel font, pas besoin de l'installer.
13 De MAnon - 22/09/2010, 17:53
Salut à tous,
Je suis graphiste, j'étais DA depuis 3 ans en agence et je me lance en free.
Je fais surtout du print, mais forcément de lancer mon activité indépendante nécessite de mettre mon book en ligne et donc de créer un site.
J'y connais pas grand chose. Je voudrais vraiment un site pré-fait tout simple et hyper clair, que je puisse juste un peu retoucher. Est ce possible ?
Que pensez-vous de faire mon site sur iweb (logiciel apple intégré dans mon mac) ?
Et à quoi correspond Mobile me ? (que mon mac me propose quand je lance iweb)
Si vous pouvez m'éclairer, merci d'avance
A+
14 De jobi joba - 17/05/2011, 15:29
Un commentaire un peu tardif, mais quelques points dans cet article ne me semble pas tout à fait justes. (je ne suis pas un employé de google, juste un modeste webdesigner qui trouve ce service très pratique)
Une bibliothèque de typo très limitée (18 typos non exclusives)
- Ok limitée mais gratuite (vs fontsquirell ) et testable directement sur la page de la font (onglet variant)
Une compatibilité sur les navigateurs imparfaite
- Même les typo dites de périphérique (arial par exemple entre un mac et un pc.) s'affichent différemment suivant les os/browser.
Une fausse simplicité du code qui e fait appelle d’autres portions de codes
- On peut tout d'abord télécharger la typo et l'héberger (onglet download) et ensuite l’appeler via @fontface. Le code css sera bien plus long, (appel des variantes en bold, italic, etc) et il ne faudra pas oublier la conversion en eot pour ie. Si on veut faire simple, notamment pour faire une proposition d'intégration, il est préférable d'utiliser le JS de google.
Les typos hébergées par google
- voir l'onglet download qui permet de télécharger la typo et surtout la possibilité de donner des sous au designer de la font suivant ses moyens !
Vous avez accès à toutes les typos que vous souhaitez
- Après différents test, des typos ne s'affichent jamais de la même façon sur différentes configuration (même de l'helvetica neue suivant qu'elle vient d'un mac ou d'un pc puis qu’elle est convertie). Ces tests, conversions, sur les navigateurs sont chronophages lorsque l'on veut utiliser une typo exotiques.
C’est une implémentation standard qui ne vous oblige pas à dépendre d’une entreprise tierce pour le rendu de votre site
- Dans ce cas je vous conseille fortement de supprimer l'appel a google analytics et d’héberger sur votre propre serveur (ne serait ce pas celui d'ovh ? ) une solution statistiques
15 De Julien - 18/05/2011, 11:40
1) fontsquirell est gratuit, et on peut tester les polices
2) si c'est pour la télécharger et l'utiliser en font-face... alors c'est du font face et l'utilisation de font API est inutile = ce que je dis dans mon article
3) Même remarque pour l'hébergement, si on la télécharge, ça ne sert à rien, c'est du font-face classique
4) Compatibilité : même problème partout, google ou pas.
Bref l'article reste "tout à fait juste" et google fait de toutes façons appel à font-face, mais en obligeant à passer par son API = ça sert à rien.
5) En quoi google analytics impacte le RENDU du site, dis-le moi, je serai curieux de le savoir. Et si au passage tu pouvais me dire le rapport avec font-api...
16 De Kriffin - 31/05/2011, 11:16
C'est finit tout ça :'(
17 De ange16 - 18/01/2012, 14:57
Plus ou moins d'accord avec ce qui a été dans l'article.
D'accord:
- Ce n'est pas une révolution
- La bibliothèque est pauvre (mais grossit)
- On peut faire mieux, plus propre etc..
Pas d'accord:
- C'est loin d'être inutile
- ça évite de se coltiner les transformations de polices en x formats (qui a dit rendu différent? ^^)
- c'est pas le boulot du développeur web mais du graphiste de gérer l'aspect typo
Pour moi Google font rendu énormément service, et je garde en tête que si le client veut une typo particulière il y a @font-face. Je trouve l'argument du 'si on désactive javascript ça ne marche plus' petit et j'y répondrai en rigolant que si vous coupez le net ben ça marche plus non plus.
Article intéressant