Dealing with FOUT in SPAs using FEFs can be quite a challenge. :)
It's an ongoing issue that I am currently trying to address.
I have a dynamic component that loads various components, each requiring specific styling and fonts unique to them.
The fonts are causing some headaches in this situation.
What strategies exist to prevent FOUT in this scenario?
Here is my current exploration of the topic:
Browsers typically hide text styled with custom fonts until the font has fully loaded.
- This approach doesn't work well in Vue since text isn't loaded for the browser to detect before JavaScript inserts it, bypassing the browser's mechanism.
- Possibly solvable through SSR or static DOM rendering, allowing the browser to potentially recognize the text earlier. However, this may lead to FOIT (Flash of Invisible Text) which could be considered worse than FOUT.
This method doesn't apply to dynamic components.
- CSS is combined unless using async components.
- All CSS imports are fetched, but fonts are only requested when they are actually used on the page. This means a network request for the CSS import happens first, followed by fonts once they style something on the page. It's somewhat... quick. :D
Consider WebFontLoader?
- A JavaScript library created by Google/Typekit as a companion to Google Web Fonts.
- Potentially allows delaying component loading until the font has been fully loaded by utilizing its events.
- Requires external elements to be aware of the font.
- No obvious way to directly access and extract CSS information.