Ici vous pourrez découvrir, comment grâce à l’API de Google, importer de nouvelles polices, valables sur n’importe quel navigateur, et sur la plupart des jouets comme l’iphone, l’ipad, et les téléphones Androïd.
Pourquoi utiliser une API ?
Il est toujours possible d’importer des polices de caractères et les intégrer « à la mano ». Cependant l’utilisation de cette API permet de le faire très rapidement et vous serez sûr de sa bonne intégration pour la plupart des navigateurs.
En effet reprendre une police, puis la convertir aux différents formats est toujours un petit casse tête.
Il faut donc prévoir 3 formats minimum : .eot, .ttf/.otf, .svg
Source : Typographisme.net
L’avantage d’utiliser une API est que vous n’aurez pas à gérer ça, elle le fait pour vous, en détéctant la version du navigateur de l’internaute et en renvoyant le bon format.
Un autre plus indéniable sera aussi la légereté de la police, qui est alors plutôt bien compressée, et ne dépassant généralement pas les 30 Ko. Aussi, les fichiers sont importés depuis les serveurs de Google ce qui est un gage de fiabilité niveau rapidité du transfert.
Du côté de la librairie de polices disponible chez Google, on a le droit à une petite centaine de fonts. Rien de bien glorieux comparée à des librairies comme Dafont ou FontSquirrel. La dernière mise à jour de la librairie Google date du début de l’année 2011, avec 20 polices supplémentaires. Bref c’est encore jeune, mais c’est prometteur.
Allez c’est parti pour ce tuto très court!
Etape 1 : Choisir sa police
Bon pas besoin d’un doctorat pour cette étape. Il suffit d’aller à cette adresse : http://code.google.com/webfont.
Etape 2 : Importer la police
Allez dans l’onglet intitulé « Use this font » et copiez la première ligne dans votre page html, dans votre balise , et plus précisément au début de celles-ci. Celà évite d’avoir à attendre le chargement d’une librairie JS ou autre pour afficher la police dans la page.
Donc on se retrouve avec ceci :
<!DOCTYPE html> <html> <head> <title>Démo Site web en HTML5</title> <link href='http://fonts.googleapis.com/css?family=Walter+Turncoat|Fontdiner+Swanky' rel='stylesheet' type='text/css'>
A noter qu’on peut importer plusieurs polices dans la même requete. Il suffit alors de séparer les noms de police par le caractère ‘|‘.
Un petit gain de temps, et ca évite d'avoir une page trop longue.
Etape 3 : Son utilisation en CSS
Maintenant que notre ligne d'import est en place, nous allons pouvoir l'utiliser via les feuilles de style CSS. Tout comme l'on spécifie en CSS une attribution de police à certains types d'éléments de notre page via l'utilisation de la propriété "font-family".
p { font-family: 'Fontdiner Swanky', arial, serif; }
Je n'ai pas grand chose à rajouter sur cette partie, si ce n'est un conseil : n'abusez pas trop des polices fantaisistes pour les paragraphes de contenus, ca serait bête d'arriver à une nouvelle génération Comic Sans MS 
Résumé
Voilà c'est terminé, c'était court mais je pense que ça peut être utile.
N'hésitez pas à voir la doc de Google sur cette API et de vous tenir informé sur leur blog si son actualité vous intéresse.
N'hésitez pas à laisser des commentaires pour vos remarques, astuces, conseils, améliorations, et soutien moral
