Problem using custom fonts - PLEASE HELP!

Publishing help Project settings
1

Hello All,

I just purchased two fonts from Fonts.com (Helvetica Now & ITC Century) and have no idea how to upload them correctly into Webflow. I’ve used fonts from Google many, many times in my projects but this is the first time I’ve attempted to step outside that.

I purchased them in the Webfonts format as opposed to the Desktop format, but the files and info they gave me seem to be useless for using in Webflow. Apparently this Webfont format is supposed to be implemented by using the “@font-face rule” and by using CSS stylesheets, which I’m not sure is correct for our usage here.

Plus, each different styling and weight of the font is named a random collection of numbers and letters. So I have no idea which one I’m uploading to the designer when I put it in. That makes it nearly impossible to input the correct information for each one until AFTER I save it. But after I save each file, Webflow reverts all the files to the exact same font weight & style, making it impossible to see the difference that the newest upload has in comparison to the others from its family.

I emailed Fonts.com support about this and this is the response I got:

Webfonts are for embedding the font into your website using the @font-face rule and desktop formatted fonts can be installed to your computer’s Fonts folder, for use in any desktop application on your computer that has a font menu. I assume your license is correct as you mention you want to use the fonts on website.

When you purchase webfonts at our webshop, you’ll be able to download a .zip file customized to include the fonts and CSS you’ll need to implement your fonts on your website. All of the webfonts available are self-hosted, meaning you’ll receive actual font files that you can host right on your own server, which will add to the speed and ease of use of your fonts!

A purchase of webfonts will include:

  • Your webfont in both WOFF and WOFF2 format
  • A demo.html document which will allow you to test the font locally, as well as give you some tips about getting started!
  • A CSS stylesheet you can use as is, or customize to your needs that will let you implement the fonts easily.

Our webfonts are sold via pageviews, which are tracked via an @import line that’s included in our provided CSS stylesheet. You may want to contact Webflow helpdesk for using external fonts as we don’t have access to that.

Please help, community! Do I just need to do something differently, or do I need to get the Desktop license instead of the Webfont license? Thank you.

2

You only have to upload the woff2 files in the font section of the site’s settings. I doubt the @import thing is technically mandatory (may be legally mandatory as you probably didn’t buy the fonts but a licence for the fonts for a given amount of pageviews).

Can you send me the files you got via PM here so I can check for you? Don’t worry I’m not after your files :smiley:

1 Like
3

Thank you for replying! I’ll send them over to you.

I have no problem in uploading individual font files to the site’s settings. The problem is this: none of the files are named descriptively and I don’t have many ways to be sure of which file is which exact weight and style. The only way I can do that is to upload them one by one to the site settings, then save it, see how it visualizes, then guess at what the proper labels are for it.

BUT if I upload a second one before saving the first, it changes the first file to be visually identical to the second! And if I do it a third time, Webflow changes the first TWO to be visually identical to the third!

It seems like my only option is to upload them each one at a time, save them each one at a time, then look at how each one is visualized by Webflow, then manually edit the labels for that font to match what weight/style I think it is. Then re-save, and move on to the next one. With more than 40 font files to upload, doing it this way would take me several hours.

Hopefully you can help me find a better solution. :slight_smile:

4

If I tell you how many times I did exactly this…