Using swap for font display, also font caching?

Highlighted
Tourist
5 0 2

I am trying to use font-display: swap to force a common font to display page text while loading, and then swap to the web font when it's downloaded. I've gone through all the CSS, adding "font-display: swap;" where necessary, but my theme's two main fonts weren't affected. Those seem to be set outside of the CSS and I can't figure out how to get them to swap.

 

Also, there doesn't seem to be any cache control on the web fonts. I'd like to give them a longer TTL. Is there a way to do this?

2 Likes
Highlighted
Tourist
4 0 1

I would like an answer to this question as well. Google Site Speed says I need to do this to speed up my site but I'm not sure where to do this.

I am using the Debut Theme.

0 Likes
Highlighted
New Member
2 0 0

Hello!

 

I'm interested in this as well.

 

Here is some related documentation:

 

https://web.dev/font-display/?utm_source=lighthouse&utm_medium=unknown

 

Did anybody figure this out?

0 Likes
Highlighted
Tourist
3 0 1

I sort of figured it out.

 

In the theme.scss.liquid file find the lines that look like this:

{{ header_font | font_face }}
{{ base_font | font_face }}

 

And make them look like this:

{{ header_font | font_face: font_display: 'swap' }}
{{ base_font | font_face: font_display: 'swap' }}

 

Do the same thing for all the lines that have "font_face" in them.

 

Now, I did that, but on occasion, it doesn't display the font I want.  So, I got the font-display: swap to be processed, I'm just trying to figure out the proper way to display the fonts.

1 Like
Highlighted
Tourist
3 0 1

Looks like the font-display: swap is only causing the font to not be displayed in the Brave browser.  It works great in Chrome, MS Edge, and Firefox.

0 Likes
Highlighted
New Member
2 0 0

Works like a charm, thank you!

0 Likes