NowYouKnowProgramming / webdev-learning-materials

Don't waste time - the highest quality resource hub for web developers (and not only!)
https://bewebdev.tech
BSD 3-Clause "New" or "Revised" License
58 stars 11 forks source link

Flash of unstyled text #144

Closed Willaiem closed 1 year ago

Willaiem commented 1 year ago

Describe the bug The Font Loading API should use the downloaded (cached) fonts on any page instead of downloading them every time.

To Reproduce

  1. Go to the main page
  2. Then go to the docs page
  3. Check the network tab in the dev tools - the font shouldn't be downloaded again.

Expected behavior The cached font should be used.

Screenshots obraz

Desktop (please complete the following information):

Willaiem commented 1 year ago

In React this could be easily solved, but in the static pages, I don't think it's possible to implement the caching. I know that we could load the fonts to the local storage, but I'm not sure if it is the right way.

I don't know if there's another way to let the browser know to cache assets.

Font Loading API has nothing to do with this issue.

For now, I'll close this issue.

goodideagiver commented 1 year ago

https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/