Ensure text remains visible during webfont load

Solved

Ensure text remains visible during webfont load

LB_B
Excursionist
32 0 31

How to ensure text remains visible during webfont load? Would like to know how to fix this issue

Added:" font-display: swap" to code in styles.scss.liquid but am still getting this or something similar: 

URL Potential Savings

40 ms
30 ms
30 ms
Accepted Solution (1)
oreoorbitz
Shopify Partner
260 31 132

This is an accepted solution.

You'll have to look for it.

I'm not sure what's the best way to do it.

Maybe go to your theme settings, in the shopify editor, and change the fonts. Like change the header font to roboto or whatever.

Then got to pagespeed insight's and see if robot is the font that that is still missing the swap display setting. If isn't, try changing another font setting.

If you applied roboto the the Heading font and thats the one missing the setting, then go to the code and double check you added display swap to that font.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

View solution in original post

Replies 10 (10)

pvoulg
Shopify Partner
178 26 62

Hi @LB_B

Have you tried font-display: fallback; instead?

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
LB_B
Excursionist
32 0 31

I just tried that. It did-not work. Thanks for trying. Please let me know if you have another suggestion

}

@font-face {
font-family: 'turbo';
src: url('{{ "turbo.eot" | asset_url }}');
src: url('{{ "turbo.eot" | asset_url }}') format('embedded-opentype'),
url('{{ "turbo.woff" | asset_url }}') format('woff'),
url('{{ "turbo.ttf" | asset_url }}') format('truetype'),
url('{{ "turbo.svg" | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
font-display: fallback;
}

oreoorbitz
Shopify Partner
260 31 132

You applied the correct setting to your turbo font, but its still missing from your helvetica font.

The reason you can't find the @font-face for Helvetica is that the font is being loaded by a shopify filter.

So look for something like {{ base_font | font_face }} , or {{ main_font | font_face }}  or whatever, the point is that it has | font_face. Then you want to add : font_display: 'swap'  to font_face, so {{ base_font | font_face: font_display: 'swap'  }}

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
LB_B
Excursionist
32 0 31

Thank you for your help.

This is the only thing I can find that meets your description:

{%- capture font_settings_list -%}
{{ settings.regular__font | font_face }}~
{{ settings.regular__font | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.regular__font | font_modify: 'style', 'italic' | font_face }}~
{{ settings.regular__font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.logo__font | font_face }}~
{{ settings.logo__font | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.logo__font | font_modify: 'style', 'italic' | font_face }}~
{{ settings.logo__font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.headline__font | font_face }}~
{{ settings.headline__font | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.headline__font | font_modify: 'style', 'italic' | font_face }}~
{{ settings.headline__font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.nav__font | font_face }}~
{{ settings.nav__font | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.nav__font | font_modify: 'style', 'italic' | font_face }}~
{{ settings.nav__font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.nav__font | font_modify: 'weight', 'lighter' | font_face }}~
{{ settings.nav__font | font_modify: 'style', 'italic' | font_modify: 'weight', 'lighter' | font_face }}~
{{ settings.slideshow_headline__font | font_face }}~
{{ settings.slideshow_headline__font | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.slideshow_headline__font | font_modify: 'style', 'italic' | font_face }}~
{{ settings.slideshow_headline__font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.slideshow_subtitle__font | font_face }}~
{{ settings.slideshow_subtitle__font | font_modify: 'weight', 'bolder' | font_face }}~
{{ settings.slideshow_subtitle__font | font_modify: 'style', 'italic' | font_face }}~
{{ settings.slideshow_subtitle__font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face }}

{%- endcapture -%}

There are lots of instances of  | font_face. Do all of these need  font | font_face: font_display: 'swap'  }}? or am I missing something. I could not find main_font or base_font.

Thanks again. I truly appreciate your help.

 

oreoorbitz
Shopify Partner
260 31 132

I think you can skip the ones that have font modify, but the rest, yes. 

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
LB_B
Excursionist
32 0 31

I am really appreciative of your help.

I just did all but the modify. It reduced the number displaying however it is still showing one?

 

oreoorbitz
Shopify Partner
260 31 132

This is an accepted solution.

You'll have to look for it.

I'm not sure what's the best way to do it.

Maybe go to your theme settings, in the shopify editor, and change the fonts. Like change the header font to roboto or whatever.

Then got to pagespeed insight's and see if robot is the font that that is still missing the swap display setting. If isn't, try changing another font setting.

If you applied roboto the the Heading font and thats the one missing the setting, then go to the code and double check you added display swap to that font.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
LB_B
Excursionist
32 0 31

Success!!! Thank you very much.

Maverickyeung
Tourist
11 0 3

Hi @oreoorbitz ,

I'm having this issue as well pop up in my Google PageSpeed Insights.

When you say double check if you added display swap to that font, how exactly do you do that? More specifically, do you just add font-display: swap; to @font-face ?

Thanks.

oreoorbitz
Shopify Partner
260 31 132

Yes, you add font display swap to any @font-face you find in your css.

That often isn't enough, since shopify themes usually come with a setting to change your fonts in the theme settings.

Those fonts are loaded in your css using a shopify filter, since the fonts are hosted on shopify's CDN. So you would want to look for something like {{ base_font | font_face }} or {{ header_font | font_face }} or{{ what_ever_this_value_is_variable | font_face }}, and add  : font_display: 'swap' so it would be something like {{ base_font | font_face: font_display: 'swap' }}.

If your having still having issues or anyone else is having issues, please make a new thread, since this thread has already had it's issue solved.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949