Can I add external fonts to the Webflow library?

TL;DR
  • Download the desired font files (.woff, .woff2, .ttf, .otf) from a reputable site.
  • Upload font files to your Webflow project's Fonts tab in Project Settings.
  • Apply the uploaded font to text elements through the Style Panel in the Designer.

You can add external fonts to your Webflow project, which allows you to use a variety of typefaces that are not available in the default options.

​

1. Find and Download Your Font

  • Choose a font: Identify and download the external font you wish to use from a reputable site like Google Fonts or Adobe Fonts.
  • File types: Ensure you have the correct font file formats such as .woff, .woff2, .ttf, or .otf.

​

2. Upload Font to Webflow

  • Open Project Settings: Go to Project Settings of your Webflow project.
  • Go to Fonts tab: Click on the Fonts tab in the left-hand menu.
  • Upload font files: Use the Upload font option to import your font files. The platform supports various formats, so upload all versions if possible for broad browser compatibility.

​

3. Use Your Font in Webflow

  • Select your font: Once uploaded, the font will appear in the Typography section of the Designer.
  • Apply the font: You can apply it to any text element through the Style Panel by selecting your uploaded font from the dropdown list.

​

Summary

To add external fonts to Webflow, download the desired fonts in compatible formats, upload them through the Project Settings under the Fonts tab, and apply them using the Style Panel in the Designer.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I add a search icon inside a text field and make it the submit button in Webflow?
How can I make my grid layout in Webflow more responsive, specifically on mobile devices, without affecting the design of the entire site?
How can I overlay an image on my website with a navigation bar using Webflow?
How can MixItUp jQuery plugin be used to filter dynamic collections in Webflow, allowing for automatic appearance of new categories and items in the filters and content?
Can I automatically change the color of a Webflow template to match the colors of my app without manually updating each element? Also, how can I remove "www" from my website's URL? Lastly, is it possible to change the color of the small circles on the home page of my Webflow website?
How to copy an animation/interaction from one Webflow project to another?
How can I implement the drag+drop function in Webflow like the one demonstrated on this site using the provided source code from jQuery UI?
How to create a Masonry Layout using Flexbox in Webflow?
How can I link the names of two people mentioned in the upcoming events section of my website to their respective personal bios in the about section using Webflow?
Is there an alternative to DappHero that allows for the inclusion of web3 in my website using custom code in Webflow?
Is there a way to add custom code in Webflow to fix the issue of a play button appearing on the screen instead of autoplay for a background video in Safari and low power mode?
How do I get my Webflow site live when I am receiving a DNS probe finished nxdomain error and the CName setting is not propagating correctly?
Is there a Webflow tutorial or forum post discussing how to create a parallax effect where graphic elements on the site scroll at different speeds?
Why are background videos not playing on the desktop version of my Webflow website, even though they work when toggling the preview?
How can I remove the green color that appears when selecting a section in the navigation bar for mobile on Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?