Strange headline font behavior on website pages

  • Unknown's avatar
    jenniferaambrose · Member ·

    Hello! I need help with a strange problem I’m having with a website I am updating. The heading font on each page initially appears as a larger bold serif font for less than a second, but then appears correctly. I’m thinking it’s using the original font from the design theme I’m using, but then automatically corrects itself very quickly to the font I changed it to. Is there a way to override this glitch so the font I chose appears right away? I tested the site on several browsers (Firefox, Safari) and it’s happening on both.

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

  • supernovia · Staff ·

    Hi! This is known as font flash. If you’d like, you can overcome it with a little snippet of CSS. I think this might work, though it’s an older trick that may need updating.

    Just note this will slow the site down a bit since it’ll prevent it from displaying until everything’s loaded:

    .wf-loading body { visibility: hidden; }

  • Unknown's avatar
    jenniferaambrose · Member ·

    Thank you! I’m not really good at CSS code. Where do I insert that line of code?

  • staff-mckluskey · Staff ·

    You’ll paste it into My Site>Design>Customize>CSS. Here’s some more information about that:

    https://wordpress.com/support/custom-design/editing-css/.

    Also, remember that with your plan, you can access Live Chat directly via https://wordpress.com/help/contact. That way, you can get help faster.

  • Unknown's avatar
    jenniferaambrose · Member ·

    I pasted that line of code in the CSS after following instructions, but it didn’t seem to work. I still the FOUT (Flash) error occurring.

  • supernovia · Staff ·

    Strange.

    Can you remove that, and try this instead?

     .entry-title, .site-title {
	visibility: hidden;
}

.wf-active .entry-title, .wf-active .entry-title .site-title {
	visibility: visible;
}
  • supernovia · Staff ·

    Also, I gave that CSS for just the titles so the rest of the site will load without an issue. If you’d rather we set it so it hides the entire site until the font loads, let me know.

  • supernovia · Staff ·

    Ah, sorry for all the pings. I noticed a minor syntax error and fixed that in the CSS snippet above.

    Let us know if that does the trick for you.

  • Unknown's avatar
    jenniferaambrose · Member ·

    Thanks for all the assistance! I was out for a week.

    I’m still seeing the FOUT font loading error.

    Does it happen when you load the pages? Maybe it’s just my iMac?

  • staff-blorbo · Staff ·

    I’m not seeing that myself.

    First, please make sure that your browser is up to date: https://browsehappy.com/

    If it is not, please try updating your browser or switching to a different browser.

    If it is, please do these two things:

    1. Try clearing your browser’s cache and cookies.

    2. Try with all browser extensions or add-ons temporarily disabled.

    Please let us know how each step goes for you, and which browser (and version of) you’re using if you’re still having trouble.

  • The topic ‘Strange headline font behavior on website pages’ is closed to new replies.