How to properly Upload and add fonts to your Webflow Projects

‍

Uploading Custom Fonts

As every project usually kicks off with uploading fonts in Webflow we have some guides we’re following when doing so.

We don't use Google Fonts Library

Now we know the feature is there and highly marketed to be an easy way to grab a font and add to your project, but there are some pitfalls when doing so. As we started to optimize websites for speed we’ve noticed that if you use the Google Fonts library, it will pull a script when doing so.

1. This can slow down your site and give you worse performance than needed
2. This will load all font weights from Google
3. Loading a Google Fonts script requires a custom Cookie and Privacy policy. You can read more about that here
   

In this case we would download the WOFF/OTF file from the Googles website and upload it manually.

We don't use Adobe Typekit

Same goes for the Adobe Typekit as for Googles version.

1. It will slow down your site and give you worse performance than needed
2. This will load all font weights from Adobe
3. Loading a Adobe Typekit script requires a custom Cookie and Privacy policy. You can read more about that here

In this case we would download the WOFF/OTF file from the Typekit’s website and upload it manually.

We don’t use Webflow’s fonts

We’ve used the Webflow default fonts many times before, but we’ve noticed that it uploads a lot of unnecessary weights to the project.

That being said it is better to go and download the WOFF/OTF file of the font version and upload it as a custom font.  

We upload WOFF/OTF
custom font files

The best way we’ve found to upload fonts to Webflow is by uploading source WOFF files to the project.

Why WOFF?

It is the smallest font file and it will impact your site speed the least.

How many fonts to upload?

Take an eye on uploading only the fonts/weights that are used in the project. The goal is to try to upload the least amount of Fonts and Font Weights possible.

Other files than WOFF:

If you cannot hunt down an original WOFF file for the font, feel free to use any other files provided by your client or your font Library.

Setting Global
Heading Styles

Figma & Webflow Flow Starter

In the kickoff file for Figma you'll find a place to set all global styles and scale them to Tablet and Mobile also.

After doing so, you'll have an easy to follow system to follow on the same design system in Webflow.

We want to set global styles for all Headings, Paragraphs, Links, Rich Text elements etc.

It is important that we do this as the first step as it will reduce the possibility for the errors and make it easier to speed up development later on.

We are adjusting Global Styles for all:

1. Body
2. Headings
3. Paragraphs
4. Quotes
5. Labels
6. List Items
7. Unordered List Items
8. Ordered List Items
9. Links
10. Images
11. And custom elements in the rich text
    

Without this initial step, we’ll end up in a place where client adds a H6 in the project that falls back to a font it shouldn’t have and it doesn’t have the size it should.

We don’t want to have a default blue link block or those ugly list items as defaults. You'll have a more Ninja like site, without the need to worry about fonts braking.

Line Height

Using EM for Line Height

When setting the line height of the headings, use EM to add Line Height.

EM is Relative to the font-size of the element (2em means 2 times the size of the current font).

*We’re in the process of switching our development flow to REM’s for sizing. Honestly we haven’t made the switch yet. As soon as we make the switch we’ll be adding a section in the article about it. Feel free to read more about it here.