0

On an WP site I use a framework wich supports custom fonts upload. But, a font file upload for every font weight. For 3 weights I'll have in the header 3 @font-face{ declarations with 3 font files loaded. Since I had no other option - just a promisse from them they will implement support in the future if it is feasible - to use a variable font, uploaded the file and selected it for every weight. And it works. But, with a caveat. I have quite a noticeable FOUT on page load. And it wasn't present with separate font files for all the weights.

If someone could help me to make some light on this, it happens due to my limitations, and a proper implementation would solve the problem? Or this is a known issue of variable fonts? Thank you. :)

6
  • So.. FOUT means error? Sorry not familiar with "fout".
    – Scott
    Jan 30 at 19:46
  • Didn't mean to say it is an error. But in that time since the page starts to load until my hosted font is ready, my site looks really bad. Especially on this transition between the default html font to my font. And It only happens in that scenario with the variable version of the font.
    – user51649
    Jan 30 at 22:08
  • Well font-face loading fonts can notoriously cause slow page rendering, then a complete refresh once the font is loaded/downloaded to the viewer's browser. That's why repositories like Google Fonts are popular.. they cache the fonts. If you're loading a custom font to a user's browser there's not a whole lot you can do to make that happen faster. The font has to be downloaded to the browser before it'll work. I suspect it's not the fact the font is a variable font.. it's the fact that it's a custom build that is slowing the page loading.
    – Scott
    Jan 30 at 22:21
  • 2
    It means Flash Of Unset Type. Not terribly common usage.
    – Yorik
    Jan 30 at 22:39
  • this might be a better question for the main SO site, have you seen this question? stackoverflow.com/questions/64417375/…
    – Luciano
    Jan 31 at 10:03

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.