Ensure text remains visible during webfont load

Solved
LB_Boyce
Excursionist
21 0 18

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)

Accepted Solutions
oreoorbitz
Shopify Partner
205 24 115

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 freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/

View solution in original post

Replies 10 (10)
pvoulg
Shopify Partner
176 26 53

Hi @LB_Boyce

Have you tried font-display: fallback; instead?

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
LB_Boyce
Excursionist
21 0 18

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
205 24 115

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 freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
LB_Boyce
Excursionist
21 0 18

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
205 24 115

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

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
LB_Boyce
Excursionist
21 0 18

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
205 24 115

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 freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
LB_Boyce
Excursionist
21 0 18

Success!!! Thank you very much.

Maverickyeung
Tourist
9 0 2

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
205 24 115

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 freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/