fermer
DéveloppementOutils - Conseils

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web

N’avez-vous jamais souhaité essayer d’utiliser les polices (fonts, en anglais) utilisées par Google dans leurs services pour vos propres projets ? Maintenant vous le pouvez. Rendez-vous sur Google Web Fonts et choisissez à partir de 206 familles de polices (et même plus)

Utilisation de Google Web Fonts

L’interface répertorie toutes les polices disponibles que l’on peut télécharger à partir du répertoire de Google. Chaque police est affichée avec un bel aperçu de sorte que vous pouvez voir à quoi elle ressemble avant même de choisir de la télécharger. Une fois que vous avez décidé de télécharger telle ou telle police, cliquez sur le bouton “Add to collection” (à droite) pour les ajouter à votre collection. Vous pouvez ajouter plusieurs polices à votre collection et télécharger la collection afin d’obtenir un dossier complet des polices sélectionnées.

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Ajout à la collection de la police

Il y a aussi une fonction de recherche que vous pouvez utiliser pour rechercher votre police préférée dans le référentiel des polices de Google. En dessous de la case de recherche il y a différents filtres qui vous permettent de restreindre la recherche de la police de votre choix.

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Filtres de recherche

L’aperçu de la police peut également être personnalisé afin d’avoir la visualisation du texte (par exemple, vous recherchez une police pour votre projet) que vous avez imaginée ou qui vous semble adaptée à votre site, contenu.

Vous pouvez choisir de modifier l’affichage du texte et sa taille.

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Modification taille du texte

Vous pouvez également choisir d’afficher l’aperçu selon trois modes : mot, phrase et paragraphe.

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Trois modes d'aperçu

Une fois que vous avez terminé d’ajouter les polices de votre choix dans votre collection, vous pouvez les télécharger et les installer sur votre ordinateur.

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Téléchargement des polices

Les polices de caractères de Google peuvent aussi être utilisées sur n’importe quelle page Web de votre site en adoptant de bonnes méthodes de CSS. Pour cela vous devez choisir “Quick-use” en bas à droite (voir la capture d’écran ci-dessous).

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Quick-use

La page suivante propose pour chaque police de Goolge un graphique qui indique comment l’utilisation de la police va impacter le temps de chargement de votre page.

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Impact temps de chargement

De plus, vous aurez les différentes procédures à utiliser afin d’intégrer la ou les polices sur votre page Web.

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Procédures d'intégration

Exemples

J’ai fait quelques essais et voici ce que ça donne :

Utiliser Google Web Fonts sur votre ordinateur ou votre site Web - Exemples d'intégration de polices

Comme vous pouvez voir, j’ai fait le test avec cinq polices de caractères différentes.

Voici le code HTML exécuté pour l’affichage de ces quatre polices.

[sourcecode language=”HTML”]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Utiliser Google Web Fonts sur votre ordinateur ou votre site Web </title>

<!– Inclusion des fonts –>
<link href=’http://fonts.googleapis.com/css?family=Rosario&v2′ rel=’stylesheet’>
<link href=’http://fonts.googleapis.com/css?family=Yellowtail&v2′ rel=’stylesheet’>
<link href=’http://fonts.googleapis.com/css?family=Leckerli+One&v2′ rel=’stylesheet’>
<link href=’http://fonts.googleapis.com/css?family=Nothing+You+Could+Do&v2′ rel=’stylesheet’>
</head>
<body>
<div class="center">
<h1 style="margin-top: 20px;">Utiliser Google Web Fonts sur votre ordinateur ou votre site Web </h1>

<p class="intro">Voici différentes polices de Google Web Fonts (Rosario, Yellowtail, Leckerli One et Nothing You Could Do)</p>

<div style="font-family:’Rosario’;font-size: 32px; padding-bottom: 50px">
‘Rosario’ – le Blog des Nouvelles Technologies
</div>

<div style="font-family:’Yellowtail’;font-size: 32px; padding-bottom: 50px">
‘Yellowtail’ – le Blog des Nouvelles Technologies
</div>

<div style="font-family:’Leckerli One’;font-size: 32px; padding-bottom: 50px">

‘Leckerli One’ – le Blog des Nouvelles Technologies
</div>

<div style="font-family:’Nothing You Could Do’;font-size: 32px; padding-bottom: 50px">
‘Nothing You Could Do’ – le Blog des Nouvelles Technologies
</div>
</div>
</body>
</html>
[/sourcecode]

[samples id=”5223″]

Conclusion

Si vous avez envie d’insérer rapidement une police sur votre site Web, ou même votre ordinateur, ce système va s’avérer intéressant.

En revanche, tout n’est pas si magnifique que ça sur Google Web Font car, même si l’outil est pertinent et performant, on peut émettre quelques réserves quant à la qualité des typographies proposées sur le site.

L’avez-vous essayé ? Qu’en avez-vous pensé ?

Tags : cssGoogle Web Fontshtmlpolices
Yohann Poiron

The author Yohann Poiron

J’ai fondé le BlogNT en 2010. Autodidacte en matière de développement de sites en PHP, j’ai toujours poussé ma curiosité sur les sujets et les actualités du Web. Je suis actuellement engagé en tant qu’architecte interopérabilité.