MiettesRâleuse (Admin)- Informations :
► Présente en semaine (09h00 - 18h00)
----
Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2205 
De jolies typos avec Google Fonts
Mar 8 Aoû 2023 - 9:37
Astuces
De jolies typos avec Google Fonts
Coucou 
Toi aussi tu as parfois envie d'utiliser une jolie police de caractères sur ton site, blog, forum ou tout simplement dans une page HTML mais tu ne sais pas comment faire ? Eh bien installe-toi, parce que j'ai une solution pour toi !
Quand on veut utiliser une typographie en particulier sur une page web, il faut, logiquement, l'uploader sur un serveur pour que tous les visiteurs de ta page puissent voir la typo (parce que oui, si la personne n'a pas la police d'installée sur ton ordinateur, il ne la verra tout simplement pas). Néanmoins, la solution que je te propose ici te dispense de cet hébergement et tu vas voir, c'est hyper simple, rapide et surtout, pratique ^^
Google te met à disposition un site où sont hébergées gratuitement une multitude de police de caractères complètement libre de droit. Tu ne trouveras pas toutes les typographies fantaisistes que tu peux avoir sur Dafont par exemple, mais le catalogue proposé est bien fourni.
Pour rappel, les polices de caractères à effets sont à éviter au maximum sur des pages web : elles peuvent rendre la lecture complexe et rebuter tes visiteurs. Opte donc pour des typos "classiques" et surtout lisible sans avoir besoin de plisser les yeux aux trois quarts et d'être tourné dans un angle de 78° 
Le site est disponible à l'adresse suivante : https://fonts.google.com/
En arrivant sur le site, tu te retrouves face à une multitude de polices de caractères. Il est temps de faire ton shopping (eh ! Profites-en, c'est gratuit).
Une fois que tu as trouvé la typo qui te plait, il te suffit de cliquer dessus. Tu arrives sur une page qui ressemble à ça :
Ici, on va choisir la graisse de caractères qui nous plait. En général, on en prend au moins 2 :
• La regular ou la médium ;
• La bold.
Pour cela, tu dois juste cliquer sur "Select [NOM]" qui se trouve à droite de la typo.
Personnellement, je prends toujours : la regular, la medium et la bold, en version "classique" (pas italique)
Evidemment, tu peux choisir plusieurs polices de caratères. Pour cela, il te suffit de répêter la même opération plusieurs fois
Je te mets néanmoins en garde. Il n'est pas judicieux d'avoir plus de 2 polices de caractères diffèrentes sur un site / blog / forum ou sur une même page web. De plus, même si Google Fonts est très utiles, tu vas demander à ta page web d'aller télécharger une ressource extérieure à ton site. Cela peut engendrer des pertes de performance. Alors rassure-toi, elles seront minimes si tu n'as qu'une ou deux typos, mais si tu en as des dizaines, je ne suis pas certaine de ce qu'il va se passer.
Maintenant que notre choix est fait, on va pouvoir récupérer les informations. Pour cela, on va cliquer sur l'icon "view selected families" qui se trouve en haut à droite
. Cela va t'ouvrir un panneau latéral qui mettra en avant :
• les polices de caractères que tu as sélectionnées ;
• comment l'utiliser sur ta page web ;
• comment utiliser la typo dans ta CSS.
Pour utiliser une typo de Google Fonts, tu as 2 possibilités :
La première consiste à appeler ta nouvelle police de caractères dans ta page html. Pour cela, on va placer le code qui se trouve dans "Use on the web" quand tu as sélectionné l'onglet ‹link›, dans la balise ‹head› de ta page web.
Par exemple :
La seconde possibilité consiste à appeler les typographies directement dans ta css en les important. Pour cela, on va placer le code qui se trouve dans "Use on the web" quand tu as sélectionné l'onglet @import
Par exemple :
Finalement, pour pouvoir utiliser ta nouvelle police de caractères dans ta page web, il va falloir utiliser l'attribut CSS font-family. Pour savoir quoi y mettre, tu as juste à copier/coller le code qui se trouve dans "Use on the web > CSS rules to specify families".
Par exemple :
Google font te donne aussi la possibilité de télécharger une typographie pour l'installer sur ton ordinateur ou pour l'héberger toi-même sur ton serveur. Pour cela, il te suffit de cliquer sur Download All que se trouve tout en bas du panneau latéral que tu ouvres en cliquant sur "view selected families"
Si tu as des questions ou un souci pour installer tes polices de caractères, n'hésite surtout pas à nous interpeler à la suite de ce message
Toi aussi tu as parfois envie d'utiliser une jolie police de caractères sur ton site, blog, forum ou tout simplement dans une page HTML mais tu ne sais pas comment faire ? Eh bien installe-toi, parce que j'ai une solution pour toi !
Quand on veut utiliser une typographie en particulier sur une page web, il faut, logiquement, l'uploader sur un serveur pour que tous les visiteurs de ta page puissent voir la typo (parce que oui, si la personne n'a pas la police d'installée sur ton ordinateur, il ne la verra tout simplement pas). Néanmoins, la solution que je te propose ici te dispense de cet hébergement et tu vas voir, c'est hyper simple, rapide et surtout, pratique ^^
Google Fonts
Google te met à disposition un site où sont hébergées gratuitement une multitude de police de caractères complètement libre de droit. Tu ne trouveras pas toutes les typographies fantaisistes que tu peux avoir sur Dafont par exemple, mais le catalogue proposé est bien fourni.
Pour rappel, les polices de caractères à effets sont à éviter au maximum sur des pages web : elles peuvent rendre la lecture complexe et rebuter tes visiteurs. Opte donc pour des typos "classiques" et surtout lisible sans avoir besoin de plisser les yeux aux trois quarts et d'être tourné dans un angle de 78° Le site est disponible à l'adresse suivante : https://fonts.google.com/
Comment ça marche ?
En arrivant sur le site, tu te retrouves face à une multitude de polices de caractères. Il est temps de faire ton shopping (eh ! Profites-en, c'est gratuit).
Une fois que tu as trouvé la typo qui te plait, il te suffit de cliquer dessus. Tu arrives sur une page qui ressemble à ça :
Ici, on va choisir la graisse de caractères qui nous plait. En général, on en prend au moins 2 :
• La regular ou la médium ;
• La bold.
Pour cela, tu dois juste cliquer sur "Select [NOM]" qui se trouve à droite de la typo.
Personnellement, je prends toujours : la regular, la medium et la bold, en version "classique" (pas italique)Evidemment, tu peux choisir plusieurs polices de caratères. Pour cela, il te suffit de répêter la même opération plusieurs fois
Je te mets néanmoins en garde. Il n'est pas judicieux d'avoir plus de 2 polices de caractères diffèrentes sur un site / blog / forum ou sur une même page web. De plus, même si Google Fonts est très utiles, tu vas demander à ta page web d'aller télécharger une ressource extérieure à ton site. Cela peut engendrer des pertes de performance. Alors rassure-toi, elles seront minimes si tu n'as qu'une ou deux typos, mais si tu en as des dizaines, je ne suis pas certaine de ce qu'il va se passer.Maintenant que notre choix est fait, on va pouvoir récupérer les informations. Pour cela, on va cliquer sur l'icon "view selected families" qui se trouve en haut à droite
. Cela va t'ouvrir un panneau latéral qui mettra en avant :• les polices de caractères que tu as sélectionnées ;
• comment l'utiliser sur ta page web ;
• comment utiliser la typo dans ta CSS.
L'installation
Pour utiliser une typo de Google Fonts, tu as 2 possibilités :
Un appel dans le HTML
La première consiste à appeler ta nouvelle police de caractères dans ta page html. Pour cela, on va placer le code qui se trouve dans "Use on the web" quand tu as sélectionné l'onglet ‹link›, dans la balise ‹head› de ta page web.
Par exemple :
- Code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Page Web</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=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
Un appel dans la CSS
La seconde possibilité consiste à appeler les typographies directement dans ta css en les important. Pour cela, on va placer le code qui se trouve dans "Use on the web" quand tu as sélectionné l'onglet @import
Par exemple :
- Code:
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body{
background: #D7D7D7;
color: #999;
font-size: 14px;
line-height: 1.2;
}
</style>
Utiliser sa nouvelle typo
Finalement, pour pouvoir utiliser ta nouvelle police de caractères dans ta page web, il va falloir utiliser l'attribut CSS font-family. Pour savoir quoi y mettre, tu as juste à copier/coller le code qui se trouve dans "Use on the web > CSS rules to specify families".
Par exemple :
- Code:
body{
background: #D7D7D7;
color: #999;
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.2;
}
Astuce bonus !
Google font te donne aussi la possibilité de télécharger une typographie pour l'installer sur ton ordinateur ou pour l'héberger toi-même sur ton serveur. Pour cela, il te suffit de cliquer sur Download All que se trouve tout en bas du panneau latéral que tu ouvres en cliquant sur "view selected families"
Si tu as des questions ou un souci pour installer tes polices de caractères, n'hésite surtout pas à nous interpeler à la suite de ce message
Mäven aime ce message
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum