Streaming live at 10am (PST)

How does the website load fonts


I am not sure how the website loads Fonts
- are the Font Variants "separate / unique calls" or is it "one call" to download the font.

I would guess... each Font Variant is a "unique call". Can someone tell me if this is true or not.

An example:
- This line was created by Webflow when I added all variants of the Font Raleway to the Project.

families: ["Raleway:100,200,300,regular,500,600,700,800,900"]

Does the website "load faster"... if I only had "this" ?

families: ["Raleway:100,200,300,regular,500,600,700"]

Or does it not matter.


Why does Webflow load all variants of the font even though it isn’t selected/used at all?

I created a blank project, changed body font to “Open Sans” and published.

This is the result, all variants/weights are loaded:

<script type="text/javascript">WebFont.load({
  google: {
    families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic"]

All the fonts being loaded in the user’s browser:

Page speed - significant slowdown - possible bug?
Help with page speed

I’m wondering about this too. The CSS never seems to get amended so if you’ve experimented with 50 web fonts, do you end up with a project loading all 50 even though you’re only using 4 for the finished project?


Would love a better understanding here too!


This topic is excellent, likely a common thing to overlook, but a large resource hog, esp. on first (pre-cached) load, and certainly on mobile (non-wifi) loading sessions.

I’d love to hear any info about this.