Lesson info

While you can use Google Fonts and/or Typekit to work with thousands of beautiful fonts in Webflow, those aren't your only options. You can also use any font you have the right to use, just by uploading it. In this video, we'll show you how to upload custom fonts to Webflow, and how to pick the right file formats for maximum browser compatibility.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

Custom fonts in Webflow let you upload font files for use in your project.

To do this, simply head on over to your Project Settings, and then visit the Fonts tab. And from here, we can see all our options for bringing fonts into our project. We'll be looking at Custom Fonts, and we'll be using this Upload button right here.

Now you can upload a variety of formats, like TTF, OTF, EOT, SVG, WOFF. But you don’t have to upload each and every single format.

If you’re looking to upload one file format with maximum compatibility and good file size, WOFF is the way to go.

If you don't have WOFF or WOFF2 versions of your font files, there are a number of great converters you can find online.

Once they’re ready to go, back in our Project Settings, we'll hit Upload, and select the font files we're looking to add.

After uploading, you might notice that some of your font family names aren't displayed correctly, or maybe they don't match. So what we're doing here is making sure to go through and edit the names so they can properly group together in the Designer. This prevents us from having duplicate or incorrect listings under Typography. Like here where someone has uploaded the same font twice, the second time falling asleep at the keyboard. After you verify, pressing upload will add that font file to the listing of installed custom fonts.

Head on over to the Designer, and your new font selection is ready for use.

You can edit or delete custom font uploads at any time, and of course you can upload additional fonts or font weights right into your project.