How to add a source in Webflow?

The use of custom typography in Webflow makes it possible to improve the visual identity of a website and make it more attractive. Although Webflow offers a large selection of Google Fonts, it also allows you to upload custom fonts in formats such as WOFF, TTF and OTF.

In this guide, we'll explain how to easily add and use custom fonts in Webflow.

1. What typography options does Webflow have?

Webflow allows you to use different types of fonts in a project:

• Google Fonts (available by default in Webflow).
• Adobe Fonts (Typekit) (requires integration with an Adobe account).
• Custom fonts (uploading own files in WOFF, WOFF2, TTF or OTF format).

If you need a font that is not in Google Fonts or Adobe Fonts, you must upload the font file manually.

2. How to upload a custom font in Webflow

To upload a custom font to Webflow, follow these steps:

Step 1: Download the font file

Make sure you have the files in the formats WOFF or WOFF2, since they are the most optimized for the web. Although Webflow accepts TTF and OTF, these formats may not be the best choice for performance and compatibility.

If the file is in another format, it can be converted with tools such as:

• CloudConvert
• Transfonter

Step 2: How to upload a custom font to Webflow?

1. Open Webflow and access the project settings panel (Project Settings).
2. Go to the tab Fonts.
3. In the section Custom Fonts, click on the button Upload.
4. Select the font files from your computer.
5. Once uploaded, Webflow will automatically apply the font to your project.

3. How to use a custom font in Webflow?

Once the typography has been uploaded, it can be applied to specific elements of the design.

Method 1: Using the Style Panel

1. Open the Designer from Webflow.
2. Select the element to which you want to apply the font (for example, a heading or a paragraph).
3. In the style panel (Style Panel), search for the section Typography.
4. In the font drop-down, search for the custom font and select it.

Method 2: Using Global Classes

If you want to use typography across your site consistently, apply the font to global tags:

1. Go to Style Panel.
2. Select the global tag in the tab Selector (for example, Body (All Pages)).
3. Apply the custom font in the section Typography.
4. This will ensure that all texts inherit the source automatically.

4. How to upload fonts from an external server to Webflow?

Another option is to upload the font from an external server using Custom CSS. This method is useful if the font is hosted on another domain or if you want to upload from Google Fonts manually.

Example of CSS code for using an external font

@font-face {
  font-family: 'MiFuente';
  src: url('https://mi-servidor.com/mifuente.woff2') format('woff2'),
       url('https://mi-servidor.com/mifuente.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Then, the font can be applied using CSS in Webflow:

body {
    font-family: 'MiFuente', sans-serif;
}

To add this code to Webflow:

1. Go to Project Settings > Custom Code.
2. In the section Head Code, paste the code inside <style>...</style>.
3. Save and publish the changes.

5. How to get the best performance from your Webflow fonts?

• Use only necessary styles: Avoid loading multiple variants of a font if they are not necessary, as this can affect site performance.
• Optimize files: If possible, use WOFF2 instead of TTF or OTF to improve upload speed.
• Compatibility Tests: Check that the typography is displayed correctly on different devices and browsers.

Adding custom fonts to Webflow is a simple and flexible process, allowing you to upload fonts manually or integrate them using CSS. Optimizing font loading improves the aesthetics and speed of the site, contributing to a better user experience.

By following these steps, you can implement any typography and ensure that it looks professional and consistent across the web.

Although adding a typography in Webflow can be simple, if your website doesn't use consistent styles throughout the design, you might be interested in having the help of a Webflow expert agency, and to take advantage of the addition of your new typography to review your design system and styles, which could increase the optimization of your website.