Google Font API & Google Font Directory : attention à la police !

[SpeedAirMan]

Hello tout le monde !

Google a annoncé le lancement de Google Font Directory et de Google Font API.

ça ne vous parle peut être pas, mais il vient directement concurrencer des services tels que Typekit (payant), un service permettant d'intégrer n'importe quel font / police dans une page web.

Ce sera très très utile pour les web designers (notamment).


Liens utiles :

• L'annonce : Introducing the Google Font API & Google Font Directory (en anglais)
• Google Font API
• Google Font Directory
• Getting Started

... et devinez quoi ? C'est compatible avec Internet Explorer 6 !!! (si si, même que j'ai testé avec IETester)
Je pensais que seuls les navigateurs récents (et décents) pouvant utiliser les propriétés de CSS3 pourraient afficher correctement les sites utilisant ce genre de technique, mais non, ça ne semble pas nécessaire.

Au passage, je précise qu'il existe plusieurs techniques pour afficher des polices différentes des polices traditionnelles (Verdana, Arial, Georgia, Helvetica...). Google se base sur la technique la plus "accessible" et la plus compatible qui existe actuellement (à ma connaissance) : @font-face. Il n'est pas l'inventeur de cette technique / propriété, et n'offre, à travers ce service, que ses compétences dans l'hébergement (les fonts/polices sont hébergé(e)s dans le cloud, sorte de CDN : des serveurs très puissants pour simplifier) et dans la technique (il ne suffit que d'ajouter une ligne de code à sa page HTML).

 

[spout]

Merci SpeedAirMan
Cool qu'ils aient fait ça avec du @font-face (je suis fan).
Au revoir les cufon et autres.

En passant, un générateur de @font-face:
http://www.fontsquirrel.com/fontface/generator
et quelques kits prêts à l'emploi:
http://www.fontsquirrel.com/fontface

 

[seebz]

Merci pour l'info

 

[mipc]

mouais bof y a pas d'anti-aliasing des caractères.

 

[marc.pastel.pro]

Bon début, mais il n'y a que 18 polices pour le moment !

 

[fredfan]

J'essaie de décortiquer les articles mais je ne comprends pas pourquoi ça marche avec IE avec un font-face alors qu'en l'utilisant directement sur le site ça ne marche pas. Quelqu'un a compris le truc ?
Parce que perso j'ai plutôt tendance à utiliser des polices rares et je n'ai pas trop envie d'attendre que Google s'y intéresse.

 

[SpeedAirMan]

Outil intéressant : Font previewer

J'essaie de décortiquer les articles mais je ne comprends pas pourquoi ça marche avec IE avec un font-face alors qu'en l'utilisant directement sur le site ça ne marche pas. Quelqu'un a compris le truc ?

Pas trop compris ta question...

Parce que perso j'ai plutôt tendance à utiliser des polices rares et je n'ai pas trop envie d'attendre que Google s'y intéresse.

La technique utilisée et proposée par Google Font existe depuis déjà qq temps (comme dit plus haut), ce n'est pas Google qui l'a inventée.
Google propose là un outil, une architecture (ses serveurs), et une liste de polices open source.

Maintenant tu peux tout aussi bien utiliser la même technique avec TES font/polices que tu pourras stocker sur tes serveurs. Mais :
- tes serveurs ne sont peut être pas aussi puissants que ceux de Google
- les polices ne seront pas mises en cache d'un site à l'autre

En effet, si un site A utilise une police nommée "toto" et que cette police/font est téléchargée depuis les serveurs de Google, alors si un autre site B utilise la même police (toujours depuis Google), le fichier font n'aura pas à être rechargé.


Pour ceux qui préfèrent Cufon (une autre méthode pour utiliser des polices/fonts exotiques), css-tricks.com vient de sortir un petit guide : Cufon 101 (ce n'est pas la même technique - je crois que Cufon est moins accessible, mais, je CROIS que les polices sont mieux lissées).
Pour ceux qui s'intéresse à tout ça, il existe encore une autre méthode : sIFR.

Edit: je viens de tomber là dessus : sIFR vs Cufon
sIFR est probablement la technique qui donne les plus beaux résultats, mais côté lourdeur, compatibilité et accessibilité, c'est ce qu'il y'a de pire.
Cufon me semble un bon compromis entre accessibilité et qualité.
@Font-Face est, je crois, le plus accessible et le plus... "sémantique" (compatible avec les navigateurs sans forcément avoir besoin de JavaScript). Côté qualité par contre, les polices ne me semblent pas correctement lissées.
(si qq un peut compléter ou rectifier mes dires, c'est le bienvenue )

 

[spout]

D'autres informations sur le @font-face:
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Un article qui montre quelques différentes techniques (Flash, JS, PHP, ...Cufon, sIFR) :
http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web- ... and-tools/

 

[FranckFK]

certainement très bon système, seule chose à déplorer une fois de plus c'est que c'est GRATUIT et au détriment d'une société qui à développé une solution payante.

Le monopole de google commence vraiment à être dangereux à tous les niveaux, il domine l'internet et engloutis tout ce qui le gène de plus en plus vite.

 

[SpeedAirMan]

Hmm... pas d'accord avec FranckFK là.
@font-face est une solution gratuite et open source.
Pareil pour les autres solutions (je crois), à l'exception de sIFR qui base une partie de sa technologie sur Flash (non libre).

Google propose gracieusement son architecture, et met à disposition des polices open source et gratuites.
Je vois pas où est le mal...


Si par "au détriment d'une société qui à développé une solution payante" tu parles des solutions proposées par Typekit par exemple, alors perso, je pense que la solution Google Font ne vient pas directement concurrencer (de front) Typekit.
Typekit propose des polices payantes de qualité que ne propose pas Google.


Je te suggère la lecture de : Google Font API & Interview (en anglais)


Merci Spout pour les liens ;-)

 

[spout]

Côté qualité par contre, les polices ne me semblent pas correctement lissées.
(si qq un peut compléter ou rectifier mes dires, c'est le bienvenue )

Pour avoir testé plusieurs @font-face kits, j'ai remarqué que certaines polices donnaient mieux dans Firefox Linux que sur Firefox Windows. Il faut tester car en effet certaines fontes n'ont vraiment pas un beau rendu.

Sur le site de mon www, le h1 c'est du @font-face, je suis plutôt content du résultat.

 

[Sucrepop]

Bonsoir
j'utilise ce qu'ils appellent le Dynamic Text Replacement depuis des années pour tous mes H1 et je n'ai jamais rencontré de problème (en tout cas rien qui ne m'est été remonté)
Police de mon choix, taille, couleur de mon choix, relativement rapide, seul "inconvénient" la nécessité d'avoir javascript activé

 

[SpeedAirMan]

Démonstration de toutes les polices proposées par Google en un coup d'oeil sur une page : http://www.goodwebfonts.com/

 

[yule]

Hello,

Par contre je suis confronter avec Cufon à un pb tout con....

En utilisant l'API google de translate, les polices sous cufon ne sont pas traduites ??

Je suis le seul ou j'ai pas la bonne police ???

A+
Yule