Streaming live at 10am (PST)

Site Speed - font-display

How can I make sure to use this CSS function? Google Pagespeed Insights recommends adding this. Is there a way to add this via custom code?

Just chiming in that I have this question too!

Why not? Just add your properties with any custom code method (for the whole site, for the page, with embed)

For those inquiring minds…

2 Likes

I noticed webflow calls google fonts using javascript instead of the regular html. It puts it on top of all pages instead of putting it in the css. I guess it helps calling typekit fonts also.

Webflow google font code using js:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script> <script type="text/javascript"> WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic" ] } }); </script>

Standard google font import code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

In this code you can see the font-display: swap being used (&display=swap) . How can we call the font-display using javascript?

Thanks

I would also love to know the answer to @Ntchi 's question. Font-display=swap would help my site greatly it seems. Is there a way to directly access the CSS to make sure the swap is in there?

1 Like

I would also like to know how I can use font-display: swap; with Webflow Font embed.

I’m also curious about this.

1 Like

I would love to find out this!

1 Like

Also trying to find a solution to this.

1 Like

For those that did not visit the link and are asking how to do this with fonts loaded via the webfont,js library that Webflow uses the answer is : TL’DR => you can’t.

The article presents options for you if you want to load the fonts yourself or leverage Cloudflare service workers. Those would be the only two options for Webflow sites hosted on Webflow.

1 Like

Awesome thanks. New to webflow forum and didn’t see that your previous comment with the link was the solution. Will check it out.

It seems that Webflow implemented “font-display: auto” to its css on hosted as well as on exported sites - wasn’t there a few weeks ago, I always added it manually to exported sites.

You can now edit this value to „swap“, „fallback“, etc when uploading a self hosted font!