Using custom fonts in Unbounce

  • 6 July 2016
  • 3 replies
  • 200 views

Hi, I’m looking to use a custom font for the landing pages I’m designing - Helvetica Neue. Could anyone give me breakdown of how to do this? Would be much appreciated!

Chris


3 replies

Userlevel 7
Badge +4

Hey there Chris,

It looks like that particular font isn’t in Google Fonts or Adobe Edge Web Fonts (which make it super easy to install additional fonts), but you can still use this other approach to install it: http://documentation.unbounce.com/hc/en-us/articles/203510114-Adding-and-Editing-Text#content4

Chris,

If you want to use Neue Helvetica you can get it from fonts.com. I forget how much a subscription is, but it is worth it. 

However, I have discovered a MUCH easier way to use the font than described in that help document. When you get a font from fonts.com you can call the font right from the css sheet, no need to download the font and make SVG’s or load up some additional javascript etc.

If you look at this example you’ll see I call the font (in this case Gotham) above the opening style tag. I got that link from my fonts.com account. It asks when you create the project what domain you are going to use and how you want to call the font. Choose by css and volia you get that link.

Then I am able to just use font-family:“Gotham”, sans-serif;  from within the h1, h2, p etc.

Just make sure to take note of the !important after font-size and line-height. Without that you will get some funky results.

Good Luck!

Joe

Great thanks!

Reply