Can I add external fonts to the Webflow library?

TL;DR

Add Google Fonts via Project Settings > Fonts by selecting and adding your desired font.
Upload custom fonts (OTF, TTF, WOFF) in Project Settings > Fonts, then use them in Style settings.
Connect Adobe Fonts by entering your Adobe Project ID in Project Settings > Fonts.
Use custom code with a CDN link or @font-face in Project Settings > Custom Code to load external fonts.

You can add external fonts to Webflow by uploading custom font files or integrating third-party font services. Follow these steps to add your desired fonts.

1. Use Google Fonts (Built-in)

Go to Project Settings > Fonts.
Search for your desired Google Font and click Add Font.
The font will be available in your Webflow Typography settings.

2. Upload Custom Fonts (OTF, TTF, WOFF)

Go to Project Settings > Fonts.
In the Custom Fonts section, click Upload Font.
Select your font files (OTF, TTF, or WOFF) and upload them.
Save changes, and the font will be available in Style settings.

3. Use Adobe Fonts (Formerly Typekit)

Go to Project Settings > Fonts.
Scroll to the Adobe Fonts section and enter your Adobe Project ID.
Click Save changes and publish your site.
The linked fonts will appear in Typography settings.

4. Load Fonts with Custom Code (CDN or @font-face)

If your font is hosted externally (e.g., on a CDN), add this to Project Settings > Custom Code > Head Code:
<link rel="stylesheet" href="https://example.com/font.css">
Use @font-face in a CSS embed to declare custom fonts.
Apply the font in CSS classes via Webflow’s Custom Code embeds.

Summary

You can add fonts to Webflow using Google Fonts, custom uploads, Adobe Fonts, or external CSS links. The easiest method is Google Fonts (built-in), but custom fonts provide more flexibility.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

What is the new feature in Webflow that allows content editors to easily select dates and times without manually typing them in?

How can I fix the issue where my "scroll into view" animation doesn't run immediately if the content is already in the viewport when the page loads in Webflow? Should I use a different type of interaction with IX2, or is there another solution?

How can I resolve the spacing and sizing issues with Lottie animations on my Webflow page?

What's the best direction to follow in incorporating a 3D animation created in Adobe Dimension (GLTF/GLB/OBJ formats) into a Webflow site?

Can I still remove the "Made in Webflow" badge on my projects when exporting to HTML with a Lite subscription plan in Webflow?

How can I retrieve the user id in Webflow when a customer places an order for implementing a "past orders" tabs in the user page?

What are some limitations and issues to be aware of when using Weglot for multilingual support on Webflow sites, and what alternatives are available for native multilingual support on the Webflow platform?

Can additional fields be integrated with Webflow's CMS item to capture more data alongside payments for a sports program sign-up website?

How can I exit read-only mode in Webflow when changes are not being saved?

Is it possible to create a highlighted text effect using Webflow similar to the image provided?

Is it possible to create an integration/plugin for Webflow that enables bulk upload of image assets from Figma/Sketch/Adobe? Can you please provide information on how to gain API access and the relevant technical documentation for this?

How can I make one column sticky and one column scrollable in the About Us section of my Webflow Grid?

What is a solution for embedding Google My Business hours into a Webflow website to keep them in sync with the latest updates?

What limitations does Webflow have in terms of design, CMS, e-commerce, hosting, and the template store?

How can the styling of the unordered list in the CMS rich text field be edited in Webflow?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?