Google Fonts est le plus populaire des services d'hébergement de polices de caratères libres de droits. On peut y trouver près d'un millier de familles de polices utilisables gratuitement.
La section suivante ne vise pas à présenter tout ce qu'offre le service Google Fonts, mais se veut plutôt un petit tutoriel pour montrer comment ajouter quelques nouvelles polices de caractères à son site Web.
Partons du fichier HTML suivant où quelques styles ont été ajoutés aux éléments body, h1 et h2, mais rien encore ne concernant les polices de caractères :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Avant Google Fonts</title>
<style>
body {
margin: 0 auto;
width: 75%;
line-height: 200%;
}
h1, h2 {
color: Teal;
}
</style>
<body>
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet. Aut velit facilis aut consectetur harum sit
rerum quae est harum explicabo. Id aspernatur quaerat non enim
praesentium aut quis architecto.
</p>
<h2>Et sint galisum</h2>
<p>
Et sint galisum est iste neque rem explicabo nulla est pariatur Quis. Et
pariatur quos et assumenda modi eum sint minima est illo distinctio aut
excepturi doloribus in officiis praesentium. Et veritatis nemo ad
voluptatem dolores eum odit deserunt.
</p>
</body>
</html>
Maintenant, imaginons que nous voulions améliorer la présentation de cette page en allant chercher deux nouvelles polices de caractères, l'une pour le texte et l'autre pour les titres. Quand on parle de "nouvelles" polices, on veut dire ici des polices différentes de celles utilisées par défaut dans le navigateur.
Sélectionnez une police de caractères. Cliquez par exemple sur "Roboto".
Sélection de la famille
Maintenant sélectionnez le style "Light 300" en cliquant sur le bouton marqué d'un "+". Cette police sera parfaite pour le texte général.
Sélection du style
Maintenant, revenez en arrière dans la navigation et cherchez une autre police pour les titres. Essayez "Zen Dots". Cliquez dessus et sélectionnez ensuite le seul style disponible, soit "Regular 400".
Une fois les deux polices choisies, récupérez le code à intégrer à vos pages Web. Tout est dans la partie droite de la page (View selected familiesi) :
Cliquez sur le bouton au besoin
Copiez d'abord le code présent dans la boîte "Use on the Web" et ajoutez-le à la section head de vos documents :
Notez que les deux premières lignes (celles avec rel="preconnect") sont là pour des raisons de performance et ne sont pas essentielles. C'est pour cette raison qu'elles sont absentes de la plupart des exemples que vous trouverez sur le Web.
Ensuite, copiez le code de la boîte "CSS rules to specify families" aux endroits requis :
Voici le fichier HTML de départ modifié pour utiliser les nouvelles polices de caractères :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Test de Google Fonts</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Zen+Dots&display=swap"rel="stylesheet"><style>
body {
margin: 0 auto;
width: 75%;
line-height: 200%;
font-family: 'Roboto', sans-serif;
}
h1, h2 {
color: Teal;
font-family: 'Zen Dots', cursive;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet. Aut velit facilis aut consectetur harum sit
rerum quae est harum explicabo. Id aspernatur quaerat non enim
praesentium aut quis architecto.
</p>
<h2>Et sint galisum</h2>
<p>
Et sint galisum est iste neque rem explicabo nulla est pariatur Quis. Et
pariatur quos et assumenda modi eum sint minima est illo distinctio aut
excepturi doloribus in officiis praesentium. Et veritatis nemo ad
voluptatem dolores eum odit deserunt.
</p>
</body>
</html>
Et voilà! À vous de choisir des polices de caractères qui s'agencent bien et qui conviennent au contenu de votre site et à l'image que vous voulez dégager.
Une icône pour votre site Web
Vous avez peut-être déja remarqué que lorsque vous visitez certains sites Web, une petite image s'affiche dans l'onglet du navigateur, juste avant le contenu de l'élément title.
Par exemple sur Prog 101 :
Le favicon de Prog 101 dans un onglet de Firefox
Dans le jargon du Web, cette petite image est appelée favicon.
Vous pouvez utiliser n'importe quelle image existante comme favicon. Vous pouvez aussi en créer une à l'aide d'un logiciel de dessin ou vous rendre sur un site Web qui offre gratuitement des favicons ou vous permet de les créer comme favicon.cc.
Dans tous les cas, retenez que :
il ne sert à rien d'utiliser une grande image puisqu'elle sera affichée dans des dimensions réduites et que les détails ne seront pas visibles;
de plus, une grande image augmentra inutilement le temps de chargement de votre page puisque, comme toutes les autres images de votre site, elle finira par être téléchargée localement dans le cache de votre navigateur;
choisissez une image simple et contrastée pour qu'elle soit bien visible;
choisissez une image dont le contenu et l'apparence ont un lien avec le thème de votre site.
Exemple d'image à utiliser comme favicon :
Une petite image simple et contrastée
On inclue le favicon à l'aide de l'élément link comme dans l'exemple suivant :
