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"]
  }
});</script>

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

2 Likes

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?

2 Likes

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.