Support » Fixing WordPress » Bad font loading on WordPress site

  • majidoooo

    (@majidoooo)


    Hi
    I have a problem and that is that when the site loads, my font loads after a few seconds. Is this a problem in terms of SEO?
    Of course, I have to say that I use plugins for better site speed. As :
    I like the font to load as soon as the site opens. Thank you for helping me fix this problem.
    Also know that the site is in Persian.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Yes, the font loading slowly can be bad for SEO as it can affect your Cumulative Layout Shift (CLS). When the font changes the number of characters per line can change, and when that happens content moves, which is penalised because it interrupts users.

    You’re already preloading the font, and you’re not serving it from a slow third party service, so there’s not really much you can do to make the font file itself load faster, but there’s two things I suggest:

    1. You have CSS that defines the @font-face CSS for the font. The font may be loading quickly, or preloaded, but if the CSS that actually applies it loads slowly then the font will not appear until the that has finished. I can see that your font CSS is at the bottom of a CSS file that is loaded asynchronously, which means it’s very likely that this is happening. This is because the CSS could be loaded after the text has loaded. You should try and load the font-face CSS earlier.

    Unfortunately, you are currently using a plugin to minify the CSS and load it asynchronously, so I can’t actually tell you how you can do this. This is because I cannot see where the actual CSS is written, or how it’s being loaded. You may need to ask the developers of these plugins for assistance.

    2. In your @font-face you are using font-display: swap. This used to be considered best practice, because it lets the browser display the text in a generic font while the custom font loads. This means that users can at least see the text while the font is loading, instead of seeing nothing. The problem with this approach is that when it does load the content may shift, causing CLS issues.

    The solution here is to use either font-display: fallback or font-display: optional. These options will only display the custom font if it is loaded quickly. If it takes too long to load then it will just fall back to the generic font for that request. Since the font will be cached after the first request, this usually means that the first page load will use a generic font, while all future views will use the correct font. The advantage of this approach is that there is no layout shift. The disadvantage is that more users will see your site without the custom fonts.

    The difference between fallback and optional is how long it will wait for the font to load before giving up. fallback waits a bit longer than optional. The longer you wait the bigger the chance of a layout shift issue, but for both options the wait time is likely too small to load a web font, so they will likely behave very similarly.

    Moderator bcworkz

    (@bcworkz)

    I see the font shift on load, but it’s a lot faster than a few seconds. The graphic took longer to load. The page speed tool at https://pagespeed.web.dev/ is happy with your site, so I don’t imagine it’s an issue. Well done!

    Thread Starter majidoooo

    (@majidoooo)

    hello thank u
    i try please check
    i think dont work
    check in mobile : https://www.dewoweb.com

    Moderator bcworkz

    (@bcworkz)

    Still looks OK on my end. The effect you are experiencing may be due to your mobile network. The @font-face reference is the last to load, but it does so in a reasonable time. It’d be better if that reference were in the page’s meta tags instead of in a CSS file. But that font is not used in above the fold content, so it’s not responsible for any font shift you see during loading.

    Review Jacob’s informative post on @font-face from earlier ^^^

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Bad font loading on WordPress site’ is closed to new replies.