Webflow sync, pageviews & more.
NEW

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

Explore Logic tutorials
How can the text color be changed for custom input fields on Webflow?
How can I configure a large image to be in the foreground of my website homepage in Webflow, similar to an example I've seen, while still having a sidebar?
How can I set a hover transform in Webflow that allows the photo inside a div to zoom in without affecting the size of the div?
How can I have precise control over placing elements side by side in Webflow? I want to create multiple element blocks within a section and stack them on top of each other or side by side with precision. Can you provide guidance on achieving this level of control? Thank you.
Is it possible to have multiple Add to Cart buttons with quantities for each product card on a Webflow eCommerce page without creating individual product pages for each item?
Why are my .ttf files not appearing when trying to upload a folder of Google's Roboto fonts to Webflow's custom fonts in site settings, even though the folder shows that it contains the files on my desktop? Any advice on what to do?
What are the options to get real-time assistance with publishing issues on Webflow?
How can I fix the issue with Google Console flagging alerts for videos on a Webflow page that do not have a thumbnail URL provided?
Can search engines crawl text that is visually hidden with a "Show More" or "Read More" button in Webflow?
How can I make an embedded video in Webflow loop once it finishes? Can I remove the video controls on hover?
Where can I find the code to remove the scroll bars from the overflow div boxes in Webflow?
How can I correctly insert and float an image in a paragraph of text in Webflow, while ensuring it remains responsive across different screen sizes/layouts?
How can Swiftype be integrated into a Webflow site?
What are you currently using for video hosting and what features would you like to see in a Webflow video hosting solution like Vidzflow?
What is the current best workaround in Webflow for adding a "select country" list into forms, without using ecommerce and considering limitations on maximum number of items and characters for custom code?
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 change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission 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?
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?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?