How to add a custom font on Webflow?

To create a professional website that reflects your vision and adheres to your brand guidelines, it's important to choose your font carefully. Webflow allows you to easily select the font that best suits you.

‍

You can configure fonts from Google Fonts directly in your site settings or upload custom fonts. In this article, we'll show you how to set up a custom font on Webflow.

‍

I. How to set up a Google Fonts font ?

‍

Webflow offers all fonts from Google Fontsin its settings. The advantages of choosing one of these fonts are the ease of installation and the wide range of choices offered by Google. Plus, with this method, you don't have to download anything!

‍

1. Go to your Webflow site settings

‍

To access your site settings, click the Webflow settings icon in the top left and select "Site Settings"

‍

‍

Once in the menu, go to the "Fonts"

‍

‍

2. Select the font that suits you

‍

To view the different fonts, go to Google Fonts.

Once you've found the perfect font, locate it in the dropdown menu on your Webflow site. Also choose the styles you want to import, the numbers indicating the font weight (400 being "normal" size, 800 for "bold") as well as the variants you'll need.

‍

‍

Once the font is selected, simply click on "Add Font" !

However, be careful when using this method, as it does not comply with GDPR regulations if your users do not agree to share their data with Google. If you do not have cookie management tools, opt for the second method.

‍

II. How to download a custom font ?

‍

If you don't want to use Google for compliance reasons, or if Google Fonts doesn't have your dream font, you can download a custom font !

Here's how to do it in 3 steps:

‍‍

1. Download a font you like

‍

You can use sites like Fontspace which offer many free fonts to help you in your search for that rare gem.

‍

‍

Then download your font in TTF, OTF, EOT, WOFF, or WOFF 2 format.

‍

Tip: the most modern and optimized format is WOFF 2. We recommend converting your fonts to WOFF 2 for free using online tools like CloudConvert.

‍

2. Unzip the file

‍

Once the .zip file is downloaded, unzip it by clicking on "Extract files…". This action will create a file containing your font and its variants.

‍

‍

‍

3. Add the file to your site settings

‍

Now that you have the font files and their variants, go to your Webflow site settings, in the "Fonts"tab.

‍

Then click on "Upload" and select your font files.

‍

‍

You will then find all your fonts, along with the uploaded sizes and variants, below the “Upload” button.

‍

‍

III. How to apply the custom font to your Webflow site?

‍

Congratulations, you have now added a custom font to Webflow. Now let's see how to apply it to your site's pages.

‍

Change the Font in the Designer

‍

Go back to the Webflow Designer to find your site. Here, select the text elements whose font you want to change.

‍

Once the element is selected, you can change the font in the "Typography" tab. This panel will also allow you to select a new font and adjust its size and potential variants.

‍

‍

Tip: Change the Body Font

To ensure style consistency across your entire website, it is recommended to apply your font directly to the "body" element of your page. This will change all fonts if they have not been manually modified.

It is therefore advisable to modify the body font so that your main font is also used for your text. You can also modify all your headings at once by changing the font of the heading classes.

‍

Thanks to Webflow, it's very easy to add custom fonts to your website. You can either use a free Google Fonts font or upload a custom font.

‍

Once you've chosen your font and uploaded it to your website, you can use it with just a few clicks. By adding custom fonts to your website, you can create a unique look and capture your visitors' attention.