Why does the browser load 13 fonts even when all custom fonts have been removed from the Webflow project?

Published on
September 22, 2023

When all custom fonts have been removed from the Webflow project, the browser may still load 13 fonts for a variety of reasons.

  1. Fallback fonts: The browser loads default fallback fonts to ensure that text remains readable even if a specific font is not available. These fallback fonts are typically built-in system fonts that are installed on the user's device.

  2. Webflow styles: Even if custom fonts are removed from the project, Webflow may still apply font styles to certain elements by default. These styles can include font families, font weights, and font sizes. As a result, the browser loads the necessary fonts to render the text according to these styles.

  3. Editor styles: Webflow's editor interface may have its own set of default fonts for displaying the visual representations of fonts within the editor. These fonts are separate from the fonts used on the published website but are loaded to ensure consistency in the editor interface.

  4. Responsive font loading: Webflow automatically optimizes font loading for responsive designs. This means that depending on the device and screen size, different font files may be loaded to enhance performance and optimize the user experience. Therefore, even if custom fonts have been removed, Webflow still loads font files based on the responsive font loading algorithm.

  5. Font-related code: In some cases, there may be custom code or CSS styles applied to specific elements that reference font files or font families that are still being loaded. Reviewing your custom code and CSS files can help identify any font-related references that may be causing additional font loading.

In conclusion, while you may have removed all custom fonts from your Webflow project, the browser can still load several fonts due to default fallback fonts, default styles applied by Webflow, fonts used in the Webflow editor, responsive font loading, and potential font-related code in custom CSS or code files.

Additional Questions:

  1. Why are fallback fonts loaded by the browser even when custom fonts are applied in a Webflow project?
  2. How does Webflow optimize font loading for responsive designs?
  3. How can I completely remove font loading for unused fonts in my Webflow project?