Upload custom fonts

Upload custom fonts in your Site settings to use them on your Webflow site.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

You can add additional fonts directly to your site 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 your own custom fonts to 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
  6. How to remove custom fonts from your site

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 4MB 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.
Important: Webflow supports variable fonts in TTF, OTF, WOFF, and WOFF2 formats. Webflow doesn’t support variable fonts in EOT and SVG formats at this time.

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, or you can upload variable fonts, which include all variations (e.g., weight, width, etc.) in a font family’s range. If you upload multiple instances of a font, 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.

The “Upload font file” button is highlighted next to a custom font in Site settings > Fonts tab > Custom fonts.

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

The “Edit” and “Delete” buttons are highlighted next to installed custom fonts.

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.

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 also edit the font display settings, which determines how font faces load based on what the browser already has saved.

The “Display” setting for an installed custom font called Mona sans is set to swap. 
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. You can browse for the font you need in Style panel > Typography > Font. The Font dropdown separates fonts by source (e.g., Google fonts, Web fonts, Custom fonts, etc.) and orders fonts alphabetically within each source. Any fonts you’ve uploaded to your site appear under Custom fonts.

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

How to remove custom fonts from your site

To remove a custom font from your site, you’ll need to identify all instances of that custom font, remove all instances of the custom font from your site, and finally delete the custom font from Site settings > Fonts tab > Custom fonts

Important: Deleting a custom font from Site settings > Fonts tab alone will not remove the custom font from your site. The custom font will continue to show up in your site’s published CSS until you remove all instances of the custom font from your site.

To identify all instances of a custom font on your site, open the Style manager and type the name of the font you want to find. This will generate a list of all the classes and HTML tags on your site that use that custom font. You can click the “list” icon next to each class to view a list of elements and components that use that class. 

The Style manager search for the custom font “Inter” shows that the Body (All pages) tag and two classes use the font. The list icon is highlighted to show the elements affected on the current and other pages.

Once you’ve identified the classes and/or HTML tags that use the custom font, you’ll need to either delete the elements that use that font and clean up their unused classes in the Style manager, or change the font used by those classes and/or HTML tags in Style panel > Typography > Font

Once you’ve removed all instances of the custom font from your site, you can remove the custom font from Site settings: 

  1. Go to Site settings > Fonts tab > Custom fonts 
  2. Click Delete next to the custom font you want to remove from your site
  3. Republish your site for your changes to take effect 

Learn more: Advanced Web Typography

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top