Import personalized typefaces

You have the option to include extra typefaces directly into your site from the Typography dropdown in the Design panel. Opt for Import typefaces and you’ll be directed to Site settings > Typography section. From there, you can upload your unique custom typefaces to your site.

In case the typeface you wish to use is accessible through Adobe typefaces (Typekit) or Google typefaces, you can incorporate them via the integrations in Site settings > Typography section. Find out more about integrating Adobe typefaces.

Valuable to be aware of: You do not require a paid Site or Workspace plan to import personalized typefaces.

Throughout this guide, you’ll discover:

How to import personalized typefaces
How to select the appropriate typeface format
How to modify installed typefaces
How to specify alternative typefaces and display configurations
How to evaluate your typefaces in the Designer
How to eliminate personalized typefaces from your site

How to import personalized typefaces

If you wish to utilize personalized typefaces on your site, open Site settings > Typography section, scroll down to Personalized typefaces, and upload your typeface file(s) there.

The Custom fonts section within the Fonts tab of Site settings allows you to upload custom fonts to your site.

Crucial: Kindly review your typeface’s licensing agreement and ensure you have the authorization to use the typeface on your site prior to uploading. Learn more about typeface licensing and usage.

Seeking complimentary typefaces? Explore: 9 places to find free (and almost free) typefaces

How to select the appropriate typeface format

You can upload various typeface file formats to your Webflow site.

Valuable to be aware of: You can upload a maximum file size of 4MB per typeface file.

Compatible across most browsers

WOFF — Web Open Font Format (review supported browsers)
TTF/OTF — TrueType Font and OpenType Font (review supported browsers)

Supported by a few browsers

WOFF 2.0 — Web Open Font Format (review supported browsers)
EOT — Embedded OpenType (review supported browsers)
SVG — SVG fonts (review supported browsers)

Valuable to be aware of: You do not have to upload every file format. Nonetheless, you can upload several different formats to encompass maximum browser support. WOFF is a solid format with comprehensive browser compatibility and a reasonable file size. Should you lack a WOFF or WOFF2 version of your typeface files, you can utilize typeface converters available online.

Crucial: Webflow accommodates variable typefaces in TTF, OTF, WOFF, and WOFF2 formats. However, Webflow does not support variable typefaces in EOT and SVG formats presently.

How to modify installed typefaces

Post the typefaces files being uploaded, you can alter the typeface type name, the typeface weight, and the typeface style.

Leading approaches: You can upload various versions of a typeface and designate a distinct typeface weight and style for each version, or you can import variable typefaces, which encompass all variations (e.g., weight, width, etc.) in a typeface family’s span. If you upload various versions of a typeface, ensure to employ the same typeface family for all versions of the same typeface. This action will ensure the typeface family is correctly grouped together in the Designer.

Once the typeface family names match accurately, you can upload each typeface file to your site. The uploaded files will display in the Designer upon reopening 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 modify your personalized typeface settings. You can also erase uploaded typefaces.

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

How to define alternative typefaces and display settings

Alternative typefaces guarantee comprehensive compatibility between browsers and operating systems. Should a site visitor’s browser fail to load your personalized typeface, it shifts to the alternative typeface. Alternative typefaces are automatically generated for every typeface family you upload.

You can alter the alternative typeface for every typeface family and choose the typeface it reverts to from an array of available typefaces.

64b94a6e7c92a16eb2ba75fc_642b311107a463cde795585d_kj5nftgznvs3b6bebxavqud6l6as2yzrf0skhkxtvencpajxfmhgrmtyhhdjrb27h7go0h1rwy6yys36ow0ds1pdjqz2du1zoebb_cslbgleqiy01pl4wot4el10348wroys4k3rsynr3zfvj3loec

It’s possible to change the font display preferences, which decide how font faces load depending on the browser’s saved data.

The “Display” setting for an installed custom font called Mona sans is set to swap.

Insider tip: By setting the font display preferences to swap, you can avoid a flash of invisible text during page loading by using a system font.

Ways to check your fonts in the Designer interface

Inside the Designer, you have complete access to your custom fonts and font variations. You can explore the font you require in the Appearance panel > Typesetting > Font. The Font selection categorizes fonts according to the source (e.g., Google fonts, Web fonts, Custom fonts, etc.) and arranges them alphabetically within each source. Any uploaded fonts on your site will be listed under Custom fonts.

You have the option to apply your custom font to any text component, any parent element, or any HTML tag to affect all paragraphs or all H1s.

The process of eliminating custom fonts from your site

To get rid of a custom font from your site, you must locate all occurrences of that custom font, delete them from your site, and ultimately erase the custom font from Site settings > Fonts tab > Custom fonts.

Note: Simply deleting a custom font from Site settings > Fonts tab will not entirely remove the custom font from your site. The custom font will still be present in your site’s published CSS until you delete all instances of the custom font from your site.

To find all instances of a custom font on your site, access the Appearance manager and search for the font name. This action will generate a list of all the classes and HTML tags on your site using that custom font. You can click the “list” symbol next to each class to see a list of elements and components utilizing 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 using the custom font, you must either erase the elements utilizing that font and tidy up their unused classes in the Appearance manager, or modify the font used by those classes and/or HTML tags in Appearance panel > Typesetting > Font.

After erasing all occurrences of the custom font from your site, you can eliminate the custom font from Site settings:

Navigate to Site settings > Fonts tab > Custom fonts
Select Delete next to the custom font you wish to remove from your site
Re-publish your site for the changes to become effective

For more information: Advanced Web Typography

Author
Recent Posts

Ewan Mak

Webflow Expert at Tenten

Webflow expert and frontend developer with 4+ years of experience. I bring a versatile skillset (HTML, CSS, JS, Figma, Adobe) to craft exceptional Webflow experiences. 70+ projects honed my ability to seamlessly blend custom code and visual development. Organized, deadline-driven, and passionate about growth, I excel in dynamic environments. Let's push boundaries and create something amazing.