Variez les typos dans vos sites web grâce à l’API Google Font

Pendant longtemps, l’utilisation de polices sur le web était restreinte aux quelques Arial, Geneva, Helvetica, Georgia, Times New Roman, et autres polices que vous connaissez sans doute très bien, tant la liste était courte. De nombreuses alternatives ont vu le jour pour étoffer ce catalogue de typos web, parmi lesquelles la toute récente Google Font API.

Présentation de Google Font API

Par le biais de sa nouvelle application, Google vous permet d’accéder à un catalogue de polices libres de droits, répertoriées dans le Google Font Directory. L’utilisation de ces polices au sein de vos pages web est simple et rapide, et surtout compatible tous navigateurs (exceptés sur les supports mobiles comme l’iPhone, l’iPad, ou l’Android). Chaque police supporte également le CSS3, incluant ainsi les effets d’ombres portées, dégradés, rotations, etc.

Elément important également, le déploiement de ces polices sur votre site web n’aura pas d’impact négatif sur le référencement et l’accessibilité de vos pages, puisque le code html est conservé. Pas de conversion en images, ou même en objets flash comme cela peut se faire avec d’autres « outils ».

Accéder au Google Font Directory

Utilisation et fonctionnement de l’API Google Font

L’utilisation de la Google Font Api ne requiert pas beaucoup plus d’efforts que l’utilisation d’une police web classique. Pas besoin donc d’être un grand développeur, il vous suffit simplement d’inclure au sein de votre code html l’appel d’une feuille de style dédiée à la typographie choisie.

1. Choisissons l’exemple de la police Droid Sans ; vous utiliserez alors cette syntaxe :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans">

2. Attribuez ensuite la police souhaitée à votre élément html grâce à l’attribut font-family dans votre feuille de style :

h1 {font-family: 'Droid Sans', serif;}

3. Par précaution, prenez soin d’indiquer une famille générique de police (ici, serif) au cas où la police mise en place par Google ne serait pas interprétée.

Afin de faciliter la mise en place de votre police, Google met à votre disposition un outil de prévisualisation qui s’avèrera très pratique pour gagner du temps et éviter les fautes de frappe !

Voir la page de prévisualisation des polices

Exemple d’utilisation de la Google Font API

Petit exemple qui vous permettra de visualiser concrètement l’utilisation de l’API Google Font et d’expérimenter les différentes possibilités qu’offre cette API.

Copiez ce code dans un document html :

<html>
<head>
<link href="http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC" rel="stylesheet" type="text/css" >

<style>
h1 {
font-family: 'Lobster', serif;
font-size: 48px;
text-shadow : 4px 4px 4px #aaa;
}
</style>

</head>
<body>
<h1>ikomeo Design</h1>
</body>
</html>

Affichez le résultat dans votre navigateur, et profitez-en également pour tester le rendu sur différents browsers.

Utilisation de l'API Google Font

Syntaxes et raccourcis

Plusieurs raccourcis vous permettent de spécifier directement dans l’url appelant la feuille de styles certaines spécificités :

Pour appeler plusieurs polices à la fois dans votre site, il vous suffit d’indiquer sur la même url les noms de chaque police, séparés par le caractère « | » :
Ex : http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Vous pouvez également indiquer directement dans l’url le style de la police, en indiquant le nom entier (bold, italic, bold italic) ou son abbréviation (b pour bold, i pour italic, et bi pour bold italic)
Ex : http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

L’arrivée de l’API Google Font devrait offrir de belles possibilités quant à l’utilisation de la typographie sur le web, utilisation bien trop longtemps bridée. L’enrichissement plus que probable du catalogue de polices de la Google Font API devrait aussi fortement y contribuer !

Tags : Fonts - Google - Typographie

A propos de l'auteur

Emeline Bulcourt

Emeline Bulcourt est directrice artistique au sein d'une web agency lilloise, et co-fondatrice du collectif ikomeo. Passionnée de graphisme et de web et constamment à l'affût des dernières actualités et tendances du milieu, elle partage son expérience et son analyse à travers ikomeo Design.

Continuez votre lecture

@font-face : des polices pour vos textes de labeur en CSS
Marre des polices système sur vos sites web ? Vous avez essayé divers outils un peu dans tous le ...
Typekit : une librairie de polices pour vos sites web
Au regard des dernières tendances en terme de webdesign, il est évident de constater que l'usage ...
Google Instant Search, moteur de recherche prédictif désormais disponible
Google avait annoncé sa mise en place, c'est désormais chose faite ! Le moteur de recherche préd ...
10 extensions Google Chrome pour webdesigners et intégrateurs
Le navigateur le plus populaire de la Silicon Valley, qui connait un bel essor dans la course ef ...
Css3Please : un générateur de css3 compatible tous navigateurs
Css3Please sera sans doute le nouvel allié des intégrateurs ! Ce générateur de css3 vous permet ...