You can upload and use your own custom fonts in any of your projects.

In this lesson
Before you begin

Uploading custom fonts

If you want to use custom fonts in a project, head to Project settings → Fonts → Custom fonts and upload your font file(s) there.

 
Important — font licenses

Choosing the right font format

You can upload a variety of font file formats into your Webflow project.

Supported by most browsers
Support by a few browsers
Good to know
  • You do not need to upload every file format. However, you can upload a number of different formats to cover maximum browser support.
  • You are able to upload a maximum file size of 2MB per font file
  • WOFF is a good format with maximum browser compatibility and a good file size. If you do not have a WOFF or WOFF2 version of your font files, you can use font converters found online.

Editing installed fonts

After the fonts files have uploaded, you can edit the font family name, the font weight, and the font style.

Best practices
  • You can upload multiple instances of a font and select a different font weight and style for each instance. Just make sure to use the same font family for all of the instances of the same font. This will ensure the font family is properly grouped together in the Designer.

Once the font family names are correct and matched up, you can upload each font file to your project. You'll be able to see the uploaded fonts in the Designer once you re-open the Designer.

 
Good to know
  • You can always edit your custom font settings.
  • You can also delete uploaded fonts.
Webflow delete custom fonts

Defining fallback fonts

Fallback fonts ensure maximum compatibility between browsers and operating systems. If a user's browser fails to load your custom font, it switches to the fallback font.

Fallback fonts are automatically created for each font family you upload.

‍Fallback fonts ensure maximum compatibility between browsers and operating systems. If a user's browser fails to laod your custom font, it switches to the fallback font.

You can edit the fallback font for each font family and choose the font it falls back to from a list of available fonts.

You can edit and define a specific fallback font for each of your installed custom fonts.