Using Helvetica font with Webflow site

Design help General
1

Hey, any idea whats happened to helvetica as s default font? i used to be there but now, boom, its GONE!!! help!

2

Hey @matthew_wheeler, there was a lot of confusion as to why Helvetica Neue didn’t work on non-OSX machines (it’s only installed on Macs by default), so we decided to remove it because it’s not a websafe font (and because it’s not available on Google or Typekit web font foundries). Sorry about that!

What browsers are you targeting for the sites you create? Are you OK with Helvetica Neue showing up as Arial on Windows machines? (Keep in mind that Windows users make up significantly more than half of all web traffic.)

3

thanks for getting back to me. I understand the UX default websafe’ issues. however, 95% iOS traffic, we’re targeting iOS traffic directly! I was planning a fallback of proxima Nova for win. would be nice to have ‘ios-font system packs’ available. but is there any workaround for now?

Matthew

4

Yeah @matthew_wheeler do you want Helvetica Neue or Helvetica? For now you can set the Helvetica to be the default font in the custom code:

<style> 
  body {
    font-family: helvetica, arial, sans-serif;
  }
</style>

Or if you set this it will choose Arial or Helvetica based on the operating system:

<style> 
  body {
    font-family: sans-serif;
  }
</style>
5

yeah, this is what i thought, it would be nice to be able to have a ‘+add custom font’ in the font drop down in the future or have a divider with ==iOS Specific Fonts== etc, would be nice for the non-coders out there!

Anyway thanks for your help!

Matthew

6

Definitely! We have a lot of cool things planned for the typography panel in the future. :slight_smile:

7

@thesergie In your first code example, if I understand correctly, the browser will try to use Helvetica first, then if it doesn’t have it (like on windows) it will fall back to Proxima-nova, and then whatever the sans-serif default font is?

If I use this, do I also have to add Proxima Nova in the site’s Fonts settings?

Thanks

8

Sorry for the confusion Laurent. Matthew was wondering about Proxima Nova so that’s why I added it in there. I removed it from the example because it can be confusing (since Proxima Nova is a paid font).You would have to have proxima nova in your selected typekit in order to make that work.

9

Oh too bad. Then let’s say I use FontSquirrel’s font-face generator (Create Your Own @font-face Kits » Font Squirrel) and upload a custom font. After, how do I go about implementing it into my webflow site and then choosing that font in design editor list? @thesergie

10

yeah, Helvetica is gone :

11

@LaurentCardinal We don’t support custom web fonts yet. We currently have Typekit and Google fonts support which covers a very large range of fonts. We do have plans to let you host your own web fonts on Webflow and use them in the designer, but no hard ETA on that.

EDIT - custom font support is available to users on paid plans. See the fonts settings page to see how you can add your own fonts to your site.

12

@thesergie Where do I add the custom code for helvetica? My head code is empty, do I just add it to the first line?

Thanks!
Alex

13

Yes, put it in the head code of the custom code!

14

I’ve tried adding each code to the custom code head, but the font remains Arial on both mac and pc?