Je suis un grand partisan de l’utilisation de System Fonts, qui sont rapides, légers et fonctionnent très bien, mais parfois vous avez besoin d’être un peu fantaisiste.
Vous avez besoin d’une police spécifique qui rendra vos conceptions belles.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 prend en charge 992 familles de polices.
L’interface est un peu écrasante et, en tant que personne non experte en polices, je suis hésitante quant à la police que je dois choisir.
Je recherche généralement « les meilleures polices google » sur Google et je regarde les articles que j’obtiens, pour avoir une idée de à quoi cela ressemble.
Nous pouvons utiliser la police comme nous le voulons, même dans un projet commercial, mais nous ne pouvons pas la revendre.
En bas, nous avons une section intéressante qui énumère les polices qui sont souvent jumelées avec 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.
Maintenant, vous pouvez appuyer sur le lien « Télécharger la famille » en haut à droite de la page pour télécharger le fichier TTF de la police, que vous pouvez installer sur votre ordinateur et 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, c’est cliquer sur « Sélectionner ce style » à côté de chaque style que vous voulez, 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 Embed et là, vous pouvez trouver le code que vous devez entrer dans votre projet : un élément de lien pour inclure la police dans le HTML, et la règle CSS pour appliquer la famille de police à 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 »>
et ensuite cette CSS:
body { /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib32 /lib64 /libx32 /lost+found /media /mnt /opt /proc /root /run /sbin /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old utilisez votre sélecteur préféré ici : font-family : ‘Press Start 2P’, cursive ; }
Nous avons une police de secours au cas où la police ne peut pas être chargée, ou prend trop de temps à charger.
Une autre façon d’inclure la police est d’utiliser la directive @import dans le CSS, de sorte que vous n’avez pas besoin d’utiliser l’attribut link 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 limitation : elle est plus lente. Si la police est liée dans le HTML, le navigateur fera une requête vers l’URL de la police dès qu’il lira le HTML.
Si la police est liée dans le CSS, le navigateur doit d’abord faire une requête pour charger le CSS, puis il peut faire une requête 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 repli, puis qui charge la bonne police lorsqu’elle est disponible.
.
