Fonts Loading issue

  • Hello,

    We have a WordPress website and we try to solve the CLS issue.
    Fonts loading causes a CLS issue.
    We installed fonts in our server “‘Titillium Web’, sans-serif” and we added @font-face {} in our style.css.

    The problem is when our website is loading first the different font loads than the “Titillium ” font loading that’s why we getting a CLS issue because layout and content start to jumping.

    Is WordPress load any default fonts?
    How to solve this problem?
    How to completely load only one font (Titillium web).

    Thank You

Viewing 1 replies (of 1 total)
  • no

    (@ivancanhelp)

    Without seeing your page it’s hard to diagnose ways to prioritize loading your font.

    In general content shifting isn’t usually prevented by font choice alone. The reason is that even if you load only one font, things can be smaller while the font is loading, and then expand once the font loads.

    While the browser waits for the font to load sometimes you will see a “default” font in the meantime, this font typically comes from your browser/system os, unless another fallback font is specified.

    Here are some resources that should help you reduce content jumping:

    https://web.dev/cls/#how-to-improve-cls

    They have some links there as well to other resources which go more in depth on specific details of how to reduce it.

    And here are some more links you might find useful:
    https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/
    https://css-tricks.com/content-jumping-avoid/

    Even something as simple as setting min-height whenever possible can make a big difference! Usually it’s a mix of a couple solutions working together.

    Hope that helps!

    If your question has been answered, we would love if you would mark this topic as resolved in the sidebar. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did.

Viewing 1 replies (of 1 total)
  • The topic ‘Fonts Loading issue’ is closed to new replies.