Back to all lessons
Lesson library

Upload custom fonts

Upload custom fonts in your Webflow projects.

Note: We’re transitioning to Workspaces, and this article has been updated to reflect that change. Visit the blog post to read more about these updates and changes.
If you’re looking for similar content that covers account-specific behavior, please visit our original lesson on uploading custom fonts.
 
This video features an old UI. Updated version coming soon!

You can add more fonts to your site directly from the Font dropdown in the Style panel. Choose Add fonts and you’ll be redirected to Site settings > Fonts tab. There, you can upload and use your own custom fonts on your site.

If the font you want to use is available through Adobe fonts (Typekit) or Google fonts, you can add them through the integrations in Site settings > Fonts tab. Learn more about integrating Adobe fonts

Good to know: You do not need a paid site or Workspace plan to upload custom fonts.

In this lesson, you’ll learn:

  1. How to upload custom fonts
  2. How to choose the right font format
  3. How to edit installed fonts
  4. How to define fallback fonts and display settings
  5. How to test your fonts in the Designer

How to upload custom fonts

If you want to use custom fonts on your site, open Site settings > Fonts tab, scroll down to Custom fonts, and upload your font file(s) there.

The Custom fonts section within the Fonts tab of Site settings allows you to upload custom fonts to your site.
Important: Please read your font’s license agreement and make sure you have permission to use the font on your site before you upload it. Learn more about font licensing and usage.

Looking for free fonts? Check out: 9 places to find free (and almost free) fonts

How to choose the right font format

You can upload a variety of font file formats to your Webflow site. 

Good to know: You are able to upload a maximum file size of 2MB per font file.

Supported by most browsers

Supported by a few browsers

Good to know: You don’t need to upload every file format. However, you can upload a number of different formats to cover maximum browser support. 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.

How to edit installed fonts

After the fonts files have been 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. 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 site. The uploaded files will appear in the Designer once you reopen your site in the Designer.

Step one, select the font files from the finder window and click on the blue open button.
Step two, confirm the upload by clicking on the green Upload font file button on the right of the Custom fonts section.

You can always edit your custom font settings. You can also delete uploaded fonts.

The installed fonts section includes the name of the fonts uploaded and font descriptions under the name. To the right of the names, there is an edit and delete button. These buttons are highlighted.

How to define fallback fonts and display settings

Fallback fonts ensure maximum compatibility between browsers and operating systems. If a site visitor’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.

The Fonts tab of Site settings contains a “Fallbacks for Installed Fonts” section where you can define fallback fonts. 

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

Step one on the left, select the dropdown menu to select which font fallback you want to use. Step two on the right, Verdana has been selected as the fallback font for Graphik.

You can also edit the font display settings, which determines how font faces load based on what the browser already has saved.

Step one on the top, the font display dropdown menu is highlighted in the installed fonts section. Step two on the bottom, select between the options auto, block, swap, fallback and optional in the font display drop down menu.
Pro tip: Setting font display settings to swap can prevent a flash of invisible text when pages load by using a system font.

How to test your fonts in the Designer

In the Designer, you’ll have full access to your custom fonts and font weights. Just browse for the font you need in the Style panel (S) > Typography section. The fonts list is ordered alphabetically.

You can apply your custom font to any text element, any parent element, or any HTML tag to affect all paragraphs or all H1s.

Learn more: Intro to Web Typography

Try Webflow — it's free