kale theme header font loading issue

  • Hello!
    For some reason, my header font loads weird when you first visit my site. It looks like a different font for a millisecond and then changes to the real font. I think this may be affecting my core web vitals.

    I do not believe I have changed any setting for the font/heading.

    Do you have any recommendations on how to fix this or why this might be the case?

    Thanks in advance!

    The page I need help with: [log in to see the link]

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

  • Hi Emily,

    Thanks for a great question!

    It looks like you’re using a performance plugin that is adding font-display: swap; to your fonts. This can be good or bad, depending on your goal, but it essentially causes the browser to display the text using a local font first, and then after the correct font is loaded, they are swapped. That’s what you’re seeing in the header. Sometimes this is the preferred behavior for blocks of text, etc., but for the large text in the header, that “swap” may be more disturbing and detrimental to the user experience than the brief delay that they would experience if you were loading and displaying the correct font from the outset.

    I’m not sure how much granularity your performance plugin provides here, but if you don’t see any options for controlling this, you may have to reach out to them to see whether you can fine tune this at all, or whether they recommend another approach.

    Hope this helps- if you need anything else just let us know!

    Thread Starter emilyfabulous

    (@emilyfabulous)

    Hi Steven,
    Thanks for getting back to me! I don’t have that many plugins so do you think it would be WP Rocket?

    Thanks again,
    Emily

    From their documentation, that does appear to be the case, Emily:
    https://docs.wp-rocket.me/article/1312-optimize-google-fonts

    Good find!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘kale theme header font loading issue’ is closed to new replies.