New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How to Install and Setup Custom Fonts in Webflow Website

Do you want to install and set up custom fonts in Webflow website? In this article, I will show you how to easily install and set up custom fonts for your website to give it a unique look and feel.

Table of Contents

Why You Need Custom Fonts in Your Webflow Website

Using custom fonts is a great way to personalize your website and make it stand out from the crowd. Custom fonts help to create a strong visual identity and can help your website to be more memorable to visitors. By using custom fonts, you can also ensure that your website matches your brand and conveys the right tone and message to your audience.

Step 1. Using Google Web Fonts for Custom Fonts in Webflow Website

If you want to use Google Web Fonts for your custom fonts, follow these steps:

1. Go to gwfh.mranftl.com to find Google fonts.

2. Choose your preferred font and download the font files. In this example, we will download the Playfair Display font.

Download the font files for custom fonts in webflow website
Download the font files for custom fonts in webflow website

3. Scroll to the bottom of the page and click on the “Download files” button.

Step 2. Using Non-Google Fonts for Custom Fonts in Webflow Website

If you want to use fonts that are not available on Google Fonts, follow these steps:

1. Download the font style that you need. In this example, we will download the Swansea font from fontspace.

Download Swansea font from fontspace
Download Swansea font from fontspace

2. Convert the font format from .ttf to .woff2 using transfonter.org.

Step 3. Installing and Setting up Custom Fonts in Your Webflow Website

After downloading and converting the font files, it’s time to install them in your Webflow website:

1. Go to your Webflow website project and open the site settings.

2. Click on the “Fonts” menu and scroll down to the “Custom fonts” section.

Click on the "Fonts" menu and scroll down to the "Custom fonts" section.
Click on the “Fonts” menu and scroll down to the “Custom fonts” section.

3. Upload the custom fonts that you have downloaded in the previous steps and click on the green button to install them.

Upload the custom fonts that you have downloaded in the previous steps and click on the green button to install them
Upload the custom fonts that you have downloaded in the previous steps and click on the green button to install them

Step 4. Setting up Custom Fonts in Your Webflow Website Editor/Designer

Now that you have installed the custom fonts, it’s time to set them up for use in your website:

1. Open the navigator by pressing “Z” in your Webflow editor/designer, and make sure the cursor is on the “Body”.

Open the navigator by pressing "Z" in your Webflow editor/designer, and make sure the cursor is on the "Body"
Open the navigator by pressing “Z” in your Webflow editor/designer, and make sure the cursor is on the “Body”

2. Go to the right sidebar and click on the “Style” tab. In the style selector, target the body (all pages) and set up the custom fonts for the default font that you will use.

Go to the right sidebar and click on the "Style" tab. In the style selector, target the body (all pages) and set up the custom fonts for the default font that you will use
Go to the right sidebar and click on the “Style” tab. In the style selector, target the body (all pages) and set up the custom fonts for the default font that you will use

3. Set up Playfair Display as the default custom font for all H1 headings, and repeat this step for the rest of the headings.

Set up Playfair Display as the default custom font for all H1 headings, and repeat this step for the rest of the headings
Set up Playfair Display as the default custom font for all H1 headings, and repeat this step for the rest of the headings

4. If everything works properly, your Webflow website should now have custom fonts for the body (using Swansea) and for the headings (using Playfair Display).

If everything works properly, your Webflow website should now have custom fonts for the body (using Swansea) and for the headings (using Playfair Display)
If everything works properly, your Webflow website should now have custom fonts for the body (using Swansea) and for the headings (using Playfair Display)

I hope this tutorial has helped you to install and set up custom fonts in your Webflow website. If you’re interested in building a Webflow website, check out my other Webflow website tutorials.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment