Ensure Text Remains Visible During Webfont Load -- Swap not Working?

Store Design
1

I’ve been optimizing my site for speed against Lighthouse recommendations. One minor insight is that font isn’t visible during webfont load. I added:

font_display: 'swap'

to all instances of:

font_face

in both the Timber and Theme SCSS files.

Font_Display_issue.png
Font_Display_issue.png748×271 44.4 KB

However I still get the same error when running site through Lighthouse.

1 Like
2

Hey there @IlluminateLabs ,

Are you using custom fonts? Did you upload them to the Assets folder? font-face: swap works when the fonts are loaded from your server instead of an external server like google fonts etc. You can learn more about it here https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/

Hope this helps.

3

@UmairA what do you define as custom? Both of the fonts I’m using were chosen in the Typography section of my theme, so they’re native to Shopify. This means that they don’t have separate asset files in the Asset folder.

1 Like
4

Hey again @IlluminateLabs ,

Ok, I see. Are you able to provide your store URL so I can take a look to check the origin of the fonts?

5

@UmairA messaged you.

1 Like
6

@IlluminateLabs ,

I received your PM. On inspecting, I found that the fonts were loading from googleapi and I said before font-display: swap only works for self-hosted fonts. You can confirm it here https://css-tricks.com/google-fonts-and-font-display/

Hope this helps, if so, please give thumbs up. Thanks

7

@UmairA I didn’t know that Shopify default fonts were pulling from Google API. Weird. But the problem is there’s no way in the files to access the Google Fonts URL to add:

&display=swap

I checked all of the SCSS files and there’s no google fonts URL. How can this be solved?

8

Hey, again @IlluminateLabs ,

The only solution I can think of now is that you download the fonts, add them to your assets folder, and use them as custom fonts.

Edit: Here is the line fetching the font from the googleapi

You can find it in your theme.liquid file

9

@UmairA I can see that when inspecting element too, but it’s not actually in the theme.liquid file.

The interesting thing though is that the live page is using swap to ensure text remains visible during webfont load (you can see it in the code you quoted), but it doesn’t register in PageSpeed Insights. It still shows an error in the diagnostics section for that.

10

@IlluminateLabs ,

It should be in the theme.liquid but with variables like selected fonts (instead of the name of the font) etc. Anyways, the fonts are being loaded from an external server, and hence font-display: swap can’t be used with it. Let me make it easy for you to understand by asking you a question, do you really think that it will speed up your site if we make the browser to first download the fonts from the external server then display them, and then load the other parts of the website? Or is it better to let the browser download the fonts and other parts of the store at a time and display the fonts when they are downloaded?

So in one line: Use them as custom fonts (Uploaded in assets folder) if you really want the font-display: swap property to work.

Hope that makes sense.

11

I’m trying to achieve this on Debut as well. The font swap is already added in the default theme.liquid, but I believe my issue is that the font, Open Sans, is loaded from Google instead.

Based on this thread, my thinking is to take the following steps:

  • Upload the Open Sans woff2 files via Files in Shopify

  • Replace the below section in theme.liquid to use the URL to my Shopify uploaded files

Should that be it - or would there be additional steps involved?