FOUT on Fonts

  • I’ve noticed on every Astra site I’ve developed that there is FOUT (Flash of Unstyled Text) before the actual font I’m using loads. Particularly with Google Fonts. It’s really jarring in the header most of all.

    Is there a way to prevent Astra from loading system fonts or whatever is selected by the theme by default before loading the actual font I’m using? It just doesn’t make for the most visual appealing design.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @chargeup,

    You might want to try to preload the Google Fonts. This is an article you can use as a reference.

    I hope it will help.

    Kind regards,
    Herman ??

    I really think that astra set font-display:fallback by default.
    When you add a Google font (via customizer) you first see the fallback font, then the Google font.
    The difference in letters size/style between them is the FUOT you are referring at I presume.

    – Font-display:optional (or block) will hide the system font but you have to wait until google font loads, infact fallback or swap are used mainly to avoid some pagespeed warnings.

    Astra font-display

    How to modify Astra font-display

    You can try also preloading but from what I remember you have to serve self hosted Google fonts.

    Hope it helps!

    Yes @clairedelacroix, you were right, as the docs explained. Thanks for that!

    You can use our Custom Fonts plugin to host the Google fonts locally.

    Kind regards,
    Herman ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘FOUT on Fonts’ is closed to new replies.