How to Add Custom Fonts in Webflow (3 Easy Ways)

To add custom fonts in Webflow, open Site Settings and go to the Fonts tab. You have three ways to add a font. Add a Google Font from the built-in list. Upload your own font files for a self-hosted font. Or connect Adobe Fonts through your Adobe account. Once added, the font shows up in the Typography dropdown, so you can apply it to any text. Publish your site to make the font go live.

Fonts shape how your brand looks and feels. The right typeface makes a site feel clean and on-brand. Webflow lets you add custom fonts with no code in most cases. Setting up webflow custom fonts takes only a few minutes. This guide shows three simple ways to add fonts to Webflow, then how to apply them across your site.

We build custom Webflow sites for clients every week at theCSS Agency. These are the exact steps our team uses to set up fonts.

What Are Custom Fonts?

A custom font is any typeface you add beyond the basic system fonts. System fonts like Arial and Times come with every device. Custom fonts give your brand a unique look instead.

You can add custom fonts from three sources. Google Fonts are free and hosted for you. Your own font files give you full control. Adobe Fonts offer a large paid library. Any custom font Webflow supports appears in your Typography dropdown, so all your webflow fonts stay in one place.

Font File Types Webflow Supports

If you upload your own font, use the right file type. Webflow accepts these formats:

• WOFF2: the newest and smallest format. Use this first.
• WOFF: a widely supported web font format.
• TTF and OTF: common desktop font files that also work.

WOFF2 loads the fastest, so pick it when you can. If you only have a TTF or OTF file, that is fine too. You can convert a font to WOFF2 with a free online tool.

Method 1: Add Google Fonts in Webflow

Google Fonts are the easiest way to start. They are free and hosted by Google, so setup takes seconds.

Steps to Add a Google Font

1. Open your project and go to Site Settings.
2. Click the Fonts tab.
3. Find the Google Fonts section.
4. Search for the font you want, like Inter or Poppins.
5. Select the weights and styles you need.
6. Click add, then return to the Designer.

Your new webflow google fonts now appear in the Typography dropdown. Pick only the weights you use, since extra weights slow the page.

Method 2: Upload Custom Fonts to Webflow

Want to use a brand font or a font you bought? You can upload fonts to Webflow right inside the Fonts tab. This gives you a self-hosted fonts webflow setup with full control over the look.

Steps to Upload a Font

1. Go to Site Settings, then the Fonts tab.
2. Find the Custom Fonts or upload area.
3. Drag your font files in, or click to browse.
4. Set the font family name so it stays organized.
5. Choose the weight and style for each file, like Bold or Italic.
6. Save your changes.

Tips for Uploading Fonts

Upload one file per weight and style. So a Bold file and a Regular file are separate uploads. Name each one clearly, like Brand Sans Bold. This keeps your Typography menu clean and easy to use.

Method 3: Add Adobe Fonts to Webflow

Adobe Fonts, once called Typekit, offer a huge paid library. The Adobe Fonts Webflow integration works through your Adobe account. If you have an Adobe plan, you can connect it to Webflow.

Steps to Connect Adobe Fonts

1. Create a web project inside your Adobe Fonts account.
2. Add the fonts you want to that project.
3. In Webflow, go to Site Settings, then the Fonts tab.
4. Find the Adobe Fonts section and connect your Adobe account.
5. Select the web project you made.
6. Save, then return to the Designer.

Your Adobe fonts now show in the Typography dropdown. This method needs an active Adobe plan to keep the fonts live.

Advanced: Add Custom Fonts With Code

Sometimes you need a font from a source Webflow does not support. In that case, you can add it with a small code snippet. This uses a CSS rule called @font-face.

Paste code like this into your site custom code, in the head section:

<style>
@font-face {
  font-family: "My Brand Font";
  src: url("your-font-file-url.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
</style>

Then set the font by name on your text with custom code or a class. This path needs some code skill, so most teams use the upload method instead.

How to Apply Your Font to Text

Adding a font is step one. Now you apply it to your text.

1. Select a text element, like a heading.
2. Open the Typography section in the Style panel.
3. Click the Font dropdown.
4. Pick your new font from the list.

The text updates right away in the Designer. You can set a different font for headings and body if you like.

Set a Site-Wide Default Font

Want one font across the whole site? Set it on the body tag once.

1. Select the Body (All Pages) tag in the Style panel.
2. Open the Typography section.
3. Choose your font from the Font dropdown.

Now every text element uses that font by default. This keeps your webflow typography consistent with no extra work.

Font Licensing: What You Need to Know

Fonts are software, so they come with a license. You must have the right to use a font on the web. Google Fonts are free for commercial use. A font you buy needs a web license, not just a desktop license. Never upload a font you do not have the rights to use.

Font Performance Tips

Fonts affect your page speed. Follow these tips to keep the site fast.

• Use WOFF2 files, since they are the smallest.
• Add only the weights and styles you actually use.
• Limit your site to two or three font families.
• Use font-display: swap so text shows while the font loads.

Fewer, smaller font files mean faster pages and better Core Web Vitals.

Troubleshooting: Custom Fonts Not Showing

A few small issues come up often. Here are quick fixes.

• The font does not appear after upload. Refresh the Designer, since new fonts take a moment to load.
• The font shows in Designer but not live. Publish the site, then do a hard refresh to clear the cache.
• A weight looks wrong. Check that you set the correct weight for each uploaded file.
• Adobe fonts stopped working. Make sure your Adobe plan and web project are still active.

Best Practices for Fonts in Webflow

Use these tips to keep your type clean and fast.

• Pair one heading font with one body font.
• Match the fonts to your brand style.
• Keep line length and size easy to read.
• Set a fallback font, so text still shows if the font fails.
• Reuse the same styles across the site for a consistent look.

Conclusion

You now know how to add custom fonts in Webflow three ways. Add a Google Font for a fast, free option. Upload your own files for a self-hosted brand font. Or connect Adobe Fonts for a large paid library. Each font then appears in the Typography dropdown, ready to apply.

Start by adding your brand font in Site Settings. Set it on the body tag for a site-wide default. Then publish and check the fonts on the live site.

Want a polished Webflow site with your brand fonts set up right? theCSS Agency builds fast, custom Webflow sites for SaaS and B2B teams. Book a call to talk about your project.

FAQs

1. How do I add custom fonts in Webflow?

Open Site Settings and go to the Fonts tab. Add a Google Font, upload your own font files, or connect Adobe Fonts. The font then appears in the Typography dropdown.

2. Can I upload my own fonts to Webflow?

Yes. In the Fonts tab, upload your font files in WOFF2, WOFF, TTF, or OTF format. Set the family name, weight, and style for each file.

3. What font formats does Webflow support?

Webflow supports WOFF2, WOFF, TTF, and OTF. WOFF2 is the smallest and fastest, so use it when you can.

4. How do I set a default font across my whole Webflow site?

Select the Body (All Pages) tag in the Style panel. Open the Typography section and choose your font. Every text element then uses that font by default.

5. Why are my custom fonts not showing in Webflow?

Most often the site is not published, or the Designer needs a refresh. Publish the site, refresh, and check that you set the correct weight for each file.

6. Do I need a license to use custom fonts?

Yes. You must have the right to use a font on the web. Google Fonts are free for commercial use, but a purchased font needs a web license.

7. Are Google Fonts or Adobe Fonts better for Webflow?

Google Fonts are free and simple to add. Adobe Fonts offer a larger library but need a paid plan. Both work well, so choose based on your brand and budget.