Comment utiliser Google Fonts

Je suis un fervent partisan de l'utilisationPolices système, qui sont rapides, légers et fonctionnent très bien, mais il faut parfois être un peu sophistiqué.

Vous avez besoin d'une police spécifique qui donnera une belle apparence à vos créations.

Peut-être une belle police comme Slabo, Lato ou Raleway.

Google fournit, dans le cadre de ses nombreux services, un outil appelé Google Fonts, qui (au moment où j'écris ces lignes) prend en charge 992 familles de polices:

L'interface est un peu écrasante et en tant que personne non experte en polices, je ne sais vraiment pas quelle police dois-je choisir.

Je recherche généralement les «meilleures polices google» sur Google et je regarde les articles que je reçois pour avoir une idée de ce à quoi une police pourrait ressembler. Regarder des dizaines de polices sur Google Fonts n'est pas idéal pour cela, et certains sites facilitent la tâche avec des couleurs, commesur ce post:

Prenons l'une des polices que j'ai utilisées dans l'un de mes sites Web:Appuyez sur Start 2P.

C'est une excellente police pour un site Web rétro. Je l'ai utilisé dans monCours de plate-forme Webpage d'accueil, à laquelle je voulais donner un aspect informatique.

Sur la page des polices, vous pouvez voir comment chaque caractère est rendu:

En faisant défiler vers le bas, vous pouvez voir qui est le concepteur et une partie importante: la licence. Dans ce cas, la page dit

Vous pouvez les utiliser librement dans vos produits et projets - imprimés ou numériques, commerciaux ou autres. Cependant, vous ne pouvez pas vendre les polices seules.

ce qui nous accorde beaucoup d'autorisations.

On peut utiliser la police comme on veut, même dans un projet commercial, mais on ne peut pas la revendre.

En bas, nous avons une section intéressante qui répertorie les polices qui sont souvent associées à celle-ci.

Avec les polices, j'essaie d'être aussi conservateur que possible car la plupart du temps je ne sais pas ce que je fais et voir ce que font les autres et copier le choix le plus raisonnable est une bonne stratégie.

Vous pouvez maintenant cliquer sur le lien «Télécharger la famille» en haut à droite de la page pour télécharger le fichier de police TTF, que vous pouvez installer sur votre ordinateur et l'utiliser comme police dans vos programmes de bureau.

Mais vous n'avez pas besoin de le faire pour utiliser la police sur un site Web.

Ce que vous pouvez faire est de cliquer sur "Sélectionner ce style" à côté de chaque style souhaité, dans la section Styles

Cela l'ajoutera à la barre latérale des familles sélectionnées:

Une fois que vous avez terminé, vous cliquez sur l'onglet Incorporer et vous y trouverez le code que vous devez entrer dans votre projet: alinkélément pour inclure la police dans le HTML et la règle CSS pour appliquer la famille de polices à des éléments spécifiques:

Donc, dans ce cas, ce que vous devez faire est d'ajouter ce HTML:

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

puis ce CSS:

body { /* use your favorite selector here */
  font-family: 'Press Start 2P', cursive;
}

Nous avons une police de secours au cas où la police ne pourrait pas être chargée ou prendrait trop de temps à charger.

Une autre façon d'inclure la police consiste à utiliser le@importdirective dans le CSS, vous n'avez donc pas besoin d'utiliser lelinkattribut dans le HTML - tout est dans le fichier CSS:

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

Mais cette approche a une limite: elle est plus lente. Si la police est liée dans le HTML, le navigateur fera une demande à l'URL de la police dès qu'il lit le HTML.

Si la police est liée dans le CSS, le navigateur doit d'abord faire une demande pour charger le CSS, puis il peut faire une demande pour charger l'URL de la police.

Et quelques millisecondes perdues ici peuvent faire la différence entre une page qui se charge instantanément avec la bonne police et une page qui se charge d'abord avec la police de secours, puis charge la police correcte lorsqu'elle est disponible.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: