Passer à Google fonts
AlexandreBourdeaudhui opened this issue · 5 comments
Actuellement elles font ~120-160Kb selon la fonts. Voir s'il est possible d'ajouter les fonts en .woff2 afin de rendre les fonts moins lourdes. (~20Kb)
C'est quoi les fonts ? Quels formats ? Moyen de les avoir sur Google Fonts ou autre ?
https://github.com/O-clock-Alumni/DeviensDev/tree/develop/src/assets/fonts/Encode_Sans
Elles sont actuellement toutes en format .ttf
https://fonts.google.com/ ne permet de télécharger que des .ttf, apparemment 🤔
Mais pourquoi les héberger nous-même ?
Utiliser directement <link href="https://fonts.googleapis.com/css?family=Encode+Sans" rel="stylesheet"> ou autre technique (chargement en JS), permettrait de ne pas se prendre la tête. En prime, l'API de Google renvoie le fichier qui convient en fonction de ce que supporte l'user agent.
J'ajoute simplement ces deux lignes dans le HTML ?
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">Je me suis basé sur le fichier font.css pour construire la requête à google—apis et je trouve à titre personnel qu'il y a beaucoup de police à charger.
Je demande confirmation pour les polices chargé depuis GoogleAPI dans le HTML, car j'ai lu quelque part que comme c'est chargé depuis un CDN (Google Font), il y a une sorte de "bloquage" qui se fait, le temps que la requête HTTP se met en place, pour venir charger les fonts. Par rapport ça, il était conseillé d'avoir les polices dans son dossier directement, et de les charger dans un fichier .css (comme c'est le cas actuellement quoi)
Un avis là-dessus ?
On peut faire qu'un seul link, en séparant les fonts par |
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:300,400,500,600,700,800,900|Nunito:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />Ça viendra télécharger uniquement les fonts utilisées par la page.
Niveau perf, on y gagne, car on aura du woff2 (quand le navigateur est compatible).