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?