3. font-family: ‘Lora’, ‘Times New Roman’, Georgia, serif;
1) font à télécharger via @font-face
2) font susceptible d’être disponible localement
3) font générique, dernier élément de liste
4. @font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: url(url de la font) format("woff2"),
url(url de la font) format("woff");
unicode-range: intervalle de caractères;
}
5. TTF (TrueType Font) : format non compressé réalisé dans les années 80.
OTF (OpenType Font) : évolution de TTF réalisé en 2009. Bonne compatibilité.
EOT (Embedded OpenType Fonts) : version compressée du format OTF prévu
pour IE.
WOFF / WOFF2 (Web Open Font Format) : format purement web; c’est une
évolution de TTF et OTF qui dispose de métas supplémentaires pour un
chargement plus rapide. Il bénéficie d’une compatibilité accrue.
6. Optimiser les performances
1) Font Face Observer (https://fontfaceobserver.com/)
2) Critical CSS (https://gist.github.com/scottjehl/b6129da04733e4e0f9a4)
3) Meowni Font Style Matcher (https://meowni.ca/font-style-matcher/)
4) Asynchronous CSS (https://www.filamentgroup.com/lab/async-css.html)
Alternative
1) Font-display: swap;
2) Asynchronous CSS (https://www.filamentgroup.com/lab/async-css.html)