Prevent fonts loading globally across entire site

[quarshcreative (Seán Marsh)]

Multiple pages, different fonts for each...

It's a page speed nightmare

I’m working on a project that hosts all my companies advertising campaign landing pages.

We’re using different designs for each page to test creative against certain audiences.

It’s a nightmare however that Webflow pushes all fonts globally, without the ability to set them per page — 40% of our load times are due to the fonts that are loaded, but not used, per page.

The extra script that Webflow adds, globally.

WebFont.load({ google: { families: ["Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","Vollkorn:400,400italic,700,700italic","PT Serif:400,400italic,700,700italic","Merriweather:300,300italic,400,400italic,700,700italic,900,900italic","Poppins:200,200italic,regular,italic,500,500italic,900,900italic:latin-ext,latin","Nunito Sans:regular,italic,800,800italic,900,900italic"]

Examples of how varied these designs are

So my question is: how can I (perhaps via some fancy custom JS code) prevent fonts from loading per page?

Thanks in advance if you can help me out!

---

You can see my project here: (https://preview.webflow.com/preview/fs-landingpages?utm_medium=preview_link&utm_source=designer&utm_content=fs-landingpages&preview=f9a96b276d1da76da259d427ab3727ca&pageId=5d3fd4742bc0d07d8ff0d6ad&mode=preview)

[quarshcreative (Seán Marsh)]

@webdev I wonder if you had an educated understanding of what’s going on here and how I might sort out a workaround?

[webdev (Jeff S)]

Fonts are loaded at the Site project level, not per page. Therefore you would need to standardize on a font set. You can’t prevent the loading any other way.

[quarshcreative (Seán Marsh)]

Ahhh that’s shame… thanks for letting me know! @webdev

[sam-g]

Definitely @webdev is correct that Webflow loads fonts at the site level. However, you might be able to do this with some custom code, like this:

function addGoogleFont(FontName) {
    $("head").append("<link href='https://fonts.googleapis.com/css?family=" + FontName + "' rel='stylesheet' type='text/css'>");
}

addGoogleFont("Junge");

See this thread on SO: https://stackoverflow.com/questions/14856721/dynamically-load-fonts-html-jquery for the original question and more information.

It will be a somewhat painful process IMO and you won’t be able to see the fonts in designer, you’ll also have to assign them with custom CSS b/c they won’t be in the dropdown.