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.
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.
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.
3. 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”.
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.
3. 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).
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.