Is it possible to remove the Lato and Opensans font files that load on every page of a Webflow site?

Published on
September 22, 2023

Removing the Lato and Opensans Font Files in Webflow

By default, Webflow includes the Lato and Open Sans fonts in its base styles, which are loaded on every page of a Webflow site. If you would like to remove these fonts to optimize your site's performance or customize the typography, you have a few options:

  1. Disable the fonts in project settings: In Webflow, you have the ability to disable the Lato and Open Sans fonts from the project settings. Here's how you can do it:
  • Go to the project settings by clicking on the gear icon in the top-left corner of the Designer.
  • In the "Fonts" tab, you'll see a list of fonts used in your project.
  • Find "Lato" and "Open Sans" in the list, and click on the trash can icon next to each font to remove them.
  • Save your changes.
  1. Override the font styles in your project: Another option is to override the font styles in your project by redefining the font-family property. This method allows you to replace the default fonts with custom or other web-safe fonts. Here's how you can do it:
  • Select the element or class you want to modify in the Designer.
  • In the styles panel on the right, click on the typography section.
  • Locate the "Font Family" property and click on the arrow next to it.
  • Choose your preferred font from the dropdown list or paste the CSS font stack.
  1. Use custom code to remove the font files: If you're comfortable with coding, you can use custom code to remove the font files from your Webflow site. Here's an example of how you can achieve this:
  • In your Webflow project, go to the Designer and click on the "Custom Code" icon in the left-hand toolbar.

  • In the "Head Code" section, add the following CSS code to remove the Lato and Open Sans font files:

    ```css

    ```

  • Save your changes and publish your site.

By following one of these methods, you can remove the Lato and Open Sans font files from loading on every page of your Webflow site, providing you with more flexibility in designing your typography and potentially improving your site's speed and performance.

Additional Questions:

  1. How can I add custom fonts to my Webflow site?
  2. What are the benefits of optimizing font loading on a Webflow site?
  3. Can I use Webflow without relying on Google Fonts?