Ensure text remains visible during webfont load

[LB_Boyce]

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

/helvetica/helvetica_n4.fe093fe….woff2?h1=… (fonts.shopifycdn.com)	40 ms
/helvetica/helvetica_n7.39bee04….woff2?h1=… (fonts.shopifycdn.com)	30 ms
/helvetica/helvetica_o4.f9832a0….woff2?h1=… (fonts.shopifycdn.com)	30 ms

[pvoulg]

Hi @LB_Boyce, 

Have you tried font-display: fallback; instead?

[LB_Boyce]

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]

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'  }}

[LB_Boyce]

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]

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

[LB_Boyce]

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 · 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.

[LB_Boyce]

Success!!! Thank you very much.

[Maverickyeung]

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.