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

Custom Fonts in Webflow Website for Beginners: A Simple Guide

Are you looking to install and set up custom fonts in Webflow website? In this beginner-friendly guide, we will show you how to easily install and set up custom fonts in your Webflow website. By the end of this article, you’ll be able to make your website stand out with personalized fonts.

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

Why are custom fonts important for your Webflow website?

Custom fonts help you create a distinct visual identity for your website. They can make your site more memorable to visitors and ensure that it aligns with your brand. Using custom fonts also allows you to convey the right tone and message to your audience.

How can you use Google Web Fonts for custom fonts in Webflow?

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

Google Webfonts Helper

2. Choose your desired font and download the font files, such as Playfair Display.

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

3. Click on the “Download files” button to save the font files.

How to utilize 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.

How to install and set 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. Open your Webflow website project and access the site settings.

2. Navigate to the “Fonts” menu and go 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

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:

Press “Z” to reveal the navigator in your Webflow Editor/Designer and select 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”

Access the “Style” tab on the right sidebar and configure the custom fonts for the body and headings.

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

Set Playfair Display as the default font for headings and Swansea for the body text.

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

Now that you have learned how to install and set up custom fonts in your Webflow website, take this opportunity to make your site truly unique. Play around with different font options to find the perfect match for your brand. Your visitors will appreciate the personalized touch. If you want to dive deeper into Webflow website building, explore more of our tutorials for valuable insights.

Rizwan Aritonang

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

Get In Touch

Leave a Comment