google webfont tutoriel

Utiliser la Google Web Fonts API

Travailler avec les polices web type Arial, Verdana, Times, Comic sans MS, peut parfois devenir ennuyeux pour les graphistes et webdesigners.

 

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 :)

6 commentaires

S'abonner au RSS des commentaires
  1. Counselling London
    Posté le 27/09/2011 à 11h24

    Merci bu cu!

  2. miz
    Posté le 17/02/2011 à 15h09

    Par contre, pourquoi ils proposent une SERIF en substitution de l’ Arial ?
    p { font-family: ‘Fontdiner Swanky’, arial, serif; }

    Devrai plutôt s’écrire :
    p { font-family: ‘Fontdiner Swanky’, arial, sans-serif; }
    Non ?

  3. Thomas B.
    Posté le 19/02/2011 à 3h13

    Autant héberger la typo sur son serveur, la même technique me semble t il avec http://www.fontsquirrel.com/fontface/generator !

  4. arbiter0x
    Posté le 06/02/2011 à 1h25

    Pas mal du tout! Merci

  5. Younes MISSIRIA
    Posté le 04/02/2011 à 15h37

    grace a css3

  6. François
    Posté le 07/02/2011 à 22h23

    Merci!
    En fait pour info la propriété font-face qu’utilise Google n’est pas nouvelle, et cette propriété fait parti du CSS2. Elle était sur IE5 même^^.

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>