How can I upload and manage custom fonts in Webflow?

Published on
September 22, 2023

To upload and manage custom fonts in Webflow, follow these steps:

  1. Upload the font files: First, you need to upload the font files to your Webflow project. Follow these steps to do so:
  • Go to the "Project Settings" in your Webflow dashboard.
  • Click on the "Fonts" tab.
  • Under the "Custom Fonts" section, click on the "+Add font" button.
  • Drag and drop your font files (in the formats .woff, .woff2, .ttf, or .otf) into the upload area, or click on the upload area to select the files from your computer.
  1. Assign the font to elements: After uploading the font files, you need to assign the custom font to specific elements on your website. Here's how:
  • Go to the designer view of your Webflow project.
  • Select the element that you want to apply the custom font to.
  • In the right-side panel, under the "Typography" section, click on the "Font Family" dropdown.
  • Scroll down to the bottom of the list, and you should see the custom font that you uploaded. Click on it to assign the font to the selected element.
  1. Preview and publish: Once you have assigned the custom font to your desired elements, you can preview and publish your website to see the changes. Here's how:
  • Click on the "Preview" button in the Webflow designer to see how your website looks with the custom font.
  • If you are satisfied with the changes, click on the "Publish" button to make your website live with the custom font.
  1. Manage imported fonts: If you want to manage the custom fonts you have imported, you can do so by following these steps:
  • Go to the "Project Settings" in your Webflow dashboard.
  • Click on the "Fonts" tab.
  • Under the "Custom Fonts" section, you will see the list of fonts you have uploaded.
  • To edit the settings of a font, click on the font name. You can change the font name, subset, or remove the font altogether.

By following these steps, you can easily upload and manage custom fonts in Webflow, giving your website a unique and personalized typography style.

Additional Questions:

  1. How do I upload custom font files in Webflow?
  2. Can I add multiple custom fonts to my Webflow project?
  3. What font file formats are supported in Webflow?