Ensure text remains visible during webfont load

Solved
Highlighted
Excursionist
18 0 8

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
0 Likes
Highlighted
Shopify Partner
127 21 35

Hi @LB_Boyce

Have you tried font-display: fallback; instead?

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes
Highlighted
Excursionist
18 0 8

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

0 Likes
Highlighted
Shopify Partner
72 8 46

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
1 Like
Highlighted
Excursionist
18 0 8

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.

 

0 Likes
Highlighted
Shopify Partner
72 8 46

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
0 Likes
Highlighted
Excursionist
18 0 8

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?

 

0 Likes
Highlighted
Shopify Partner
72 8 46

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
0 Likes
Highlighted
Excursionist
18 0 8

Success!!! Thank you very much.

0 Likes
Highlighted
Tourist
6 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.

0 Likes