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:
- TrueType font (TTF)
- Embedded Open Type (EOT)
- Web Open Font Format (WOFF/ WOFF2)
- Scalable Vector Graphics font (SVG)
- 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:
- Use the same Font Family name for every uploaded font.
- 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