41Mag - Comment choisir et changer de police en utilisant la bibliothèque Google web fonts

Comment choisir et changer de police en utilisant la bibliothèque Google web fonts

Grâce à la bibliothèque Google web fonts, vous aurez accès à plus de 450 polices de caractères . Simplement en reliant la police choisis, stockées sur des serveurs de Google, vous avez maintenant accès à un large éventail de polices personnalisées. Littéralement, vous pouvez intégrer ces polices dans votre projet en 20 secondes environ. C’est aussi simple que cela.

En outre, ces polices personnalisées seront même reconnus par Internet Explorer 6. Pour ma part, je suis enthousiasmé par la facilité  et par le catalogue de police qui certainement continuera à se développer au cours des années à venir.

Pendant longtemps, le Web a pris du retard sur l’impression et la sophistication typographique. Pour profiter de la richesse visuelle de polices diverses, les webmasters ont eu recours à des solutions de contournement. Les polices Web, rendues possibles grâce au  CSS3, sont hébergés dans le cloud et envoyé aux navigateurs, au besoin.

Google a travaillé avec un certain nombre de talentueux concepteurs de polices pour produire une collection variée de polices de haute qualité open source – Gratuite -pour le répertoire de polices Google. Avec l’API Google Font, l’utilisation de ces polices sur votre page web est presque aussi facile que l’utilisation d’une police dites standard.

Choisir une police de caractères sur l’API Google web fonts

Pour commencer, rendez-vous sur Google web fonts.

Google fonts

En bas de la page, dans le bandeau beau se situe le menu de navigation. Vous débuterez par l’onglet Choose pour sélectionner vos polices en les ajoutant à votre collection.

Google web fonts

Dans le cas de notre exemple, j’ai choisis deux polices de caractères : Poiret One et Cutive. Elles ont donc été ajoutées à ma collection comme vous pouvez-le constater sur l’image ci-dessus. Maintenant, cliquez sur l’onglet Review.

onglet review

L’onglet Review vous permet d’avoir différents exemples d’utilisation de la police choisis. Il ne vous reste plus qu’a cliquer sur l’onglet Use pour obtenir le code à insérer dans votre page.

onglet use

Inserer le code et relier la police choisis à votre site

Dans l’onglet Use, commencez par choisir en cochant ou décochant les ou la police à insérer dans votre site. L’utilisation de nombreux styles de polices peut ralentir le chargement de votre page Web. N’utilisez que celles dont vous avez besoin. Un indicateur sous forme de compteur de vitesse vous permettra d’évaluer ce ralentissement.

Choisissez ensuite le type d’alphabet à afficher. Si vous choisissez seulement les type dont vous avez besoin, vous aider à prévenir la lenteur de votre page web.

Et enfin, vous obtenez le code à insérer dans vos pages. Google web font vous propose 3 façons de l’intégrer : Standard, @import (à l’aide du CSS) ou en javascript. Il est INUTILE d’utiliser les trois techniques. N’en choisissez qu’une !

Pour notre exemple, nous utiliserons la première technique, celle qui nous parait la plus simple et la plus rapide. Il suffit de copier / coller la ou les ligne(s) de code générer dans le grand encadré bleu de Google web fonts (dans l’onglet Standard pour notre exemple). Vous le placerez dans l’en-tête de vos pages web – Entre les balises <head> et </head>.

1
<link href='http://fonts.googleapis.com/css?family=Poiret+One|Cutive' rel='stylesheet' type='text/css'>

Ce qui donnera quelque chose comme :

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Police google web fonts</title>
 
        <link href='http://fonts.googleapis.com/css?family=Poiret+One|Cutive' rel='stylesheet' type='text/css'>
 
</head>
<body>
<p>Corps du document</p>
</body>

Maintenant que la ou les police(s) de caractères que nous avons choisis sur Google web fonts sont reliées à nos pages, il nous reste plus qu’à appliquer ce style aux éléments. Nous utiliserons les feuilles de style – CSS – pour cette tâche.

1
2
font-family: 'Poiret One', cursive;
font-family: 'Cutive', serif;

En CSS, la commande font-family peut avoir plusieurs valeurs. Votre navigateur choisira la première valeur de police pour l’appliquer aux éléments définis. En cas de problème ou si celle-ci n’est pas reconnu, votre navigateur choisira la deuxième valeur et ainsi de suite …

Rien ne vous empêche donc, par sécurité, d’ajouter d’autre police reconnu par défaut par les différents navigateurs :

1
2
font-family: 'Poiret One', Arial, Verdana, cursive;
font-family: 'Cutive', Tahoma, serif;

En conclusion, pour profiter des polices de l’API Google, il vous suffit de créer un lien vers la police désirée, et le relier à l’aide de font-family. Et c’est tout ! Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
 
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
 
<link href='http://fonts.googleapis.com/css?family=Poiret+One|Cutive' rel='stylesheet' type='text/css'>
 
<style>
    body { font-family: 'Poiret One', cursive; font-size: 100px; }
</style>
</head>
<body>
     Corps de la page
</body>
</html>

Article du même thême : ..

  • Chrishardy

    Ne fonctionne pas avec des phrases comportant des apostrophes

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.