Custom Font Issues

[washockley]

I’ve got two separate custom font issues… one with Typekit and another with a custom font I’ve uploaded -

The problem is actually the same in both instances. The fonts are displaying thicker than they should be. And it’s pretty obvious when comparing between my sketch mockups, typekit, font book, and webflow editor.

Typekit: I’m using Freight Text Pro (normal/book) which looks great in sketch but is definitely thicker in the editor and everywhere else I look.

Custom Font: I’m using a custom font called Gilroy (extraBold) - It displays perfectly on my homepage, but as I started building my blog template it is now displaying much thicker only on the new blog template. So it’s working fine in some places and not in others on the same website.

Seems like for some reason Webflow is calling thicker versions of the fonts that actually aren’t even synced or upload to the site, but i’m not sure.

I’ve tried a number of different things to get this to work but have had zero luck getting fonts to displaying correctly on a consistent basis. Definitely slowing me down big time.

Thanks in advance!

---

Here is my public share link: https://preview.webflow.com/preview/austin-shockley-ff13ea5188790d60694cfa5?preview=75132ad40d04d5183c51a01e7a7596f7

Webflow (thick) then Sketch (normal): Font settings are the same

Typekit: Freight Text Pro

Custom FontGilroy (ExtraBold)

[Waldo (Waldo Broodrÿk)]

Hi @washockley thank you so much for reaching out and sorry for the trouble setting up your custom fonts on your Webflow site. That definitely sounds like odd behavior and I’m looking into it right now.

Webfonts definitely tend to display a bit differently than fonts in static design tools such as Sketch or Photoshop.

Have you had a chance to reference this guide on uploading custom fonts for the best browser support?

Typography | Webflow University

I noticed that on your home page you’re using a font size of 120px vs. on your blog post page a font size of only 30px with the same 800 font weight. You will most likely need a lighter weight font on the Web to render it similarly to your static design.