Closed ohrie closed 2 years ago
See also guide from Gatsby for fontsource: https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/#self-host-google-fonts-with-fontsource
JFYI, ich nutze das in https://github.com/FixMyBerlin/fixmy.safetycheck/blob/develop/gatsby-browser.js#L1-L14; klappt gut. Habe aber Lighthouse score dafür noch nicht geprüft.
Thanks @tordans ! Fixed in c4e51433c29b703d4bb546f72e0b634a15e5c116
The Problem
The Lighthouse score (FCP) is bad , also because the font is big (300kb), as well as, there is a loading chain ("Verkettung kritischer Anfragen vermeiden ").
Proposed Solution
Use Overpass font from @fontsource: https://fontsource.org/fonts/overpass
Or otherwise use a technique, so TTF request is not triggered via CSS, but in the main document.
See also https://www.digitalocean.com/community/tutorials/gatsbyjs-custom-fonts-in-gatsby