Streaming live at 10am (PST)

How to upload & manage custom fonts

How to upload & manage custom fonts

Hey all, at times I’ve struggled to navigate the custom fonts feature in Webflow, but have recently cracked the code on it — so hopefully this posts helps some of you with your projects!

Font formats

It’s important to have a range of font formats to ensure your website displays on as many devices and browsers as possible. Therefore, to cover all bases, try to gather as many of the following as you can:

  1. TrueType font (TTF)
  2. Embedded Open Type (EOT)
  3. Web Open Font Format (WOFF/ WOFF2)
  4. Scalable Vector Graphics font (SVG)
  5. TrueType Collection (TTC)

It’s likely though, that you won’t have all of the above formats. Check out this link and the image below to see which browsers will support your custom font.

Uploading & Management

Now this is where I’ve been stuck a few times of late, so I’ll break down the process in simple terms:

  • Select all the font formats in your font family and upload them.

  • Once uploaded, your fonts will look something like this:

Webflow does it’s very best to work out each font’s name and weight during the upload process, but it doesn’t always get it right… as you can see above it’s set to Inknutantiqua and the Extra Bold font has been set to Bold — that’s not what we want.

It’s really important to get a couple of things right at this stage BEFORE clicking Upload Font File:

  1. Use the same Font Family name for every uploaded font.
  2. Make sure the Font Weight is correctly set.

Depending on the number of font formats you’ve uploaded, you may need to repeat this process a number of times.

Note: The reason we have to go through this lengthy process is so a browser can choose the format it prefers to display.

The code will look something like this:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
   url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
   url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
   url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Once in the editor, you’ll be able to access your new font within the one font family:

You’ll know straight away if you’ve made a mistake during upload by scrolling through the font list.

The Custom Code Method

An alternative to uploading physical copies of customs is to choose a Google Font from the dropdown list provided by Webflow! Easy!

And there ya have it!

Hope that helps anyone struggling with uploading and managing their custom fonts.

— Marshy

1 Like

Hi Marshy,

Thanks for your contribution, though I had no idea adding a custom font is a problem for some people. I would add that if not all formats are available, there are tools available to convert font formats.
Here is a list:
Fontsquirrel Webfont Generator
Fontie
Simple Font Converter
Everything Fonts

Best,
Karl-Heinrich

1 Like

Great addition, Karl!

Thanks

Hey - what is the best way to update a custom font anytime a new version of it is released?

Guessing I could just remove the previous version and upload the latest one but that would probably involve going back into the designer and having to re-pick the font for H1, H2 etc. each time?

what is best way to update a custom font anytime a new version of it is released?

Anyone have any tips on the best way to approach this?

I couldnt find an answer either so I just went for it and deleted the previous versions, and uploaded the new version with the same family and weight assignments—everything seems to have updated without an issue. Hope that helps.

1 Like

Just as a quick follow up– keep an eye on the file sizes. I’m not sure if it’s a Fontlab issue with exporting or Webflow in uploading… but some times fonts don’t work and the file sizes are a red flag (both being too big and too small). I’ve had to export and re-upload a couple weights a few times to get it all working properly

1 Like

Great, thanks for your help! @jonway

1 Like

It’s incredibly easy — Upload custom fonts | Webflow University

Yes. I found that shortly after I posted. Thank you.