Polices de caractère Google Fonts

Polices de caractère Google Fonts

Passons maintenant à une méthode alternative très intéressante : les Google Fonts.
Il existe un autre moyen d’utiliser des polices exotiques sur une page web sans avoir à s’occuper de @font-face. Il existe des services qui fournissent des polices à intégrer directement dans son CSS depuis une URL distante. Les polices proposées sont en général adaptées à l’affichage dans un navigateur, s’afficheront correctement sur la majorité des navigateurs, et enfin le service se chargera de fournir la police à l’utilisateur, ce qui peut s’avérer non négligeable étant donné que la plupart des polices font entre 50ko et 300ko ! Cela nous fait donc 3 bonnes raisons de préférer passer par un tel service lorsqu’une des polices proposées par le service en question vous plaît.
Nous allons dans cet article nous intéresser particulièrement au service Google Font. Ce service gratuit est constitué de la Google Font API et du Google Font Directory.
L’API de Google Font est très facile à manipuler. Il suffit simplement d’ajouter une feuille de style à votre page HTML afin d’obtenir la nouvelle police. L’exemple officiel qui suit illustre bien le concept :
<html>
<head>
<link rel= »stylesheet » type= »text/css » href= »http://fonts.googleapis.com/css?family=Tangerine »>
<style>
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
Ici, il n’y a donc pas de @font-face à écrire. Tout est géré dans la feuille de style hébergée chez Google, qui va effectuer tous les traitements de son côté afin d’assurer l’affichage correct de la police. L’utilisation de l’API se résume donc à :Inclure la police qui nous intéresse,
L’appliquer à une classe CSS avec font-family.
Pour ceux qui se poseraient tout de même la question de ce qui se passe dans cette fameuse feuille de style CSS, Google analyse quel navigateur est utilisé par l’utilisateur, et renvoie le code CSS qui fonctionne le mieux pour ce navigateur. Et ce code CSS est composé d’un simple @font-face !Le fallback et les polices alternatives
Il est important de préciser au moins une police alternative standard au cas où pour une quelconque raison, la police n’ait pas été chargée correctement. Ainsi, il faut au minimum ajouter à notre propriété font-family la valeur serif ou sans-serif après notre web font.
font-family: ‘Tangerine’, serif;
Tout comme l’usage habituel de la propriété font-family, il est bien entendu possible d’ajouter autant de polices alternatives qu’on le souhaite :
font-family: ‘Tangerine’, Calibri, Georgia, serif;
Le navigateur tentera d’afficher la première police, puis si elle est indisponible, passera à la suivante… jusqu’à atteindre serif ou sans-serif.Construire l’URL de la feuille de style
L’URL du CSS de l’API Google Font à inclure est basée sur les règles suivantes. L’URL commence toujours par :

On y ajoute ensuite les noms des polices à inclure, en utilisant le symbole + à la place des espaces, et en séparant chaque police par un | :
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Il vaut mieux utiliser cette méthode pour récupérer plusieurs polices plutôt que d’inclure une nouvelle CSS, ce qui consommerait une requête HTTP supplémentaire.
Enfin, il est possible de spécifier si l’on souhaite une police en italique ou en gras en ajoutant des valeurs après le nom de la police suivi par le caractère :.
Voici les différentes valeurs possibles :
Italique : italic ou i
Gras : bold, b ou le poids de la lettre, 700 par exemple
Gras italique : bolditalic ou bi
Comme le montrent ces exemples :
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Enfin un paramètre subset sert à indiquer le type d’alphabet à utiliser pour une police (Cyrillique ou Latin par exemple) et s’écrit de la manière suivante :
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
L’ensemble des polices utilisables par l’API Google Font se trouve dans le Google Font Directory. Une trentaine de polices y sont proposées. Chacune possède une page affichant les détails de la police contenant les 26 lettres de l’alphabet latin. Une page de prévisualisation est également disponible, ainsi qu’une section « Get the code » qui vous fournira directement l’adresse de la feuille CSS à inclure.
Pour ceux qui souhaitent aller plus loin, vous pouvez consulter en anglais les considérations techniques, la documentation de l’API pour les développeurs, et utiliser les « Advanced techniques » présentes sur les pages « Get Started with the Google Fonts API » afin d’améliorer le chargement des polices.
Faites tout de même attention à ne pas surcharger vos pages avec de trop nombreuses polices, ni des polices trop volumineuses

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour haut de page

Paiement terminé

Félicitations, votre paiement est bien terminé !