See default font for few seconds!

  • silviafoglia · Member ·

    Hi everyone,
    I just launched my website and I noticed that when I move from tone page to the other.. for the first seconds I see the default colors and fonts of the pages. Then I see the ones that I choose in customizing the theme.

    What is the reason for this? Does it depends on the Theme I choose?
    Can I do something about it?

    It is pretty annoying and few people already gave me this feedback!
    Thanks!
    Silvia

    The blog I need help with is: (visible only to logged in users)

  • staff-blorbo · Staff ·

    It is normal for the original font to appear before the custom font fully downloads to the viewing browser.

    It should only be a fraction of a second though, which is what I see on the listed site.

    If it’s a few full seconds, how quick is your connection currently? You can use https://fast.com to check that.

  • silviafoglia · Member ·

    Thanks for your fast answer!!

    The speed is 32 Mbps .. I guess it’s not very fast then .. how should be an ok connection?

  • staff-blorbo · Staff ·

    Most broadband these days is 50 Mbps or higher, but even at 32 Mbps, loading a font should take just a fraction of a second.

    Are you sure you’re seeing it take a few full seconds?

  • silviafoglia · Member ·

    Thank you!!
    You are faster than my connection :D

  • silviafoglia · Member ·

    Now it’s probably only 1 sec, but I see it at every page – every time I open them. Is it supposed to be like this?
    Doesn’t the font get “stored” in the browser once you opened it the first time?

  • staff-totoro · Staff ·

    Sadly no it does not. Due to the way “web fonts” work, they are loaded fresh for every page and are not cached. This is also an issue that many site owners have so it’s not just you. Here are a few recent forums threads I found about the “flash of unstyled text” or FOUT as it is most often called:

    https://wordpress.com/forums/topic/font-changes-as-page-loads/
    https://wordpress.com/forums/topic/font-change-for-one-second/

    The issue is more visible if you are on a slow network connection, but even on faster connections you will see a flicker of text as it changes from the default font to the custom one you selected.

    The issue is also more visible if there is a big difference between the font the theme uses by default vs. the appearance of the custom font. That does seem to be the case here since the font uses an older “serif” font, but you have switched to a more modern and business-like “sans-serif” font.

    It is possible to prevent this FOUT with a bit of custom CSS, but to do so will require upgrading to our Premium plan (which has that option) but is not possible under your current Personal plan.

    Another option is to stick with this theme, but choose a custom font that is more harmonious with the default font so the difference is not so drastic. If you prefer not to switch fonts (and do not want to upgrade to use CSS) another option is to pick a theme that has a default font that is similar to the one you want.

    Any of the following themes have a “custom header” option same as the theme you have now: https://wordpress.com/themes/filter/+custom-header

    Hope that helps. Please let us know if you have any more questions.

  • silviafoglia · Member ·

    Thanks so much for all info!! It’s all super clear now, even if not really optimal for me.
    Have a great day and thanks again for your dedication and time.
    Silvia

  • The topic ‘See default font for few seconds!’ is closed to new replies.