search

taverasmisael / taverasmisael.com

My personal website and blog. Build with an hybrid Astro SSR, SolidJS and TailwindCSS. Support for internazionalization and more.
https://taverasmisael.com
2 stars 0 forks source link

`font-display: swap` not wroking #21

Closed taverasmisael closed 1 year ago

taverasmisael commented 1 year ago

This is one of the few real issues reported by Lighthouse. Although the page loads so fast that it is not very noticeable, there's a time when the custom fonts are not loaded, and the text is invisible.

We are using fontsource and the swap strategy, but it seems it needs to be fixed. Try to fix this. Self-hosting the font is a good solution, or manually declaring the fonts because we are already self-hosting.

On this comment I added a few images of this issue https://github.com/taverasmisael/taverasmisael.com/issues/20#issuecomment-1577709371

taverasmisael commented 1 year ago

This is a documented issue on the fontsource repo fontsource/fontsource#726. As suspected, browsers do not support custom CSS properties on @font-face declarations.