Ensure text remains visible during webfont load

[LB_B]

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_B, 

Have you tried font-display: fallback; instead?

[LB_B]

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_B]

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_B]

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_B]

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.

[oreoorbitz]

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.