Unused web fonts still show up in code

@Samilew mentioned this in another thread, but I want someone to confirm:

Unused font files won’t be loaded if it’s not used in the style of any element. If you are loading a font file just for a single element or header, it might not be worth it.

I built a site based on a template that used Fonts 1 and 2. I used Font 3 instead, including several weights, removing Fonts 1 and 2 on any template elements I used. But we kept the templates in an off-public folder and those unused pages still use Fonts 1 and 2. When we publish the site, assumedly the code will call Fonts 1, 2, and 3.

Question is: If user is on a page that only uses Font 3, and the code for that page calls the legacy Fonts 1 and 2, does the browser still load those 2 fonts, even if they aren’t used anywhere in that page?

If yes, is there any way to completely remove Fonts 1 and 2 short of going through every unused template page and changing them to Font 3? Or deleting all the unused templates (which we don’t want to do, in case we need them in future)?

  1. Clear cache

  2. In general yes (This is like any other resource) - but on webflow if you add custom font and dont use it - NOT
    https://discourse.webflow.com/t/custom-fonts-and-website-load-times/40234/2

  3. If you set the font-family to the bodyclass and add this class to all pages - you can change to font-3 in one click for the entire site:
    https://university.webflow.com/article/text-style-inheritance

Specificity

If you change body-font for more specific selector (.header-heading-3 for example) - you should change manually this specific styles (This is why most of the time you declare font in body-level - DRY)

specific” read her the idea:

Example:
http://cssspecificity.com/

Styling all

Also you can add style to Elements (p, h1-6, and so on - than change at once font for all Paragraphs or any other element). Read her about “Styling the All Paragraphs tag”
https://university.webflow.com/article/paragraph

1 Like