40

I want to use Helvetica Neue Condensed Bold on my webpage but it doesn't seem to be working. I have tried this: http://jsfiddle.net/ndFTL/ but it does not work, it simply shows up as Helvetica Neue Bold.

I have Helvetica Neue Condensed Bold installed: enter image description here

Could anyone please help me out?

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
  • Strongly related: http://stackoverflow.com/questions/2969323/non-standard-fonts-in-web – Pekka Apr 10 '11 at 14:47
  • related http://graphicdesign.stackexchange.com/questions/8827/helvetica-neue-equivalent-on-google-fonts – Adriano Jan 29 '16 at 17:05

5 Answers5

75

After a lot of fiddling, got it working (only tested in Webkit) using:

font-family: "HelveticaNeue-CondensedBold";

font-stretch was dropped between CSS2 and 2.1, though is back in CSS3, but is only supported in IE9 (never thought I'd be able to say that about any CSS prop!)

This works because I'm using the postscript name (find the font in Font Book, hit cmd+I), which is non-standard behaviour. It's probably worth using:

font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";

As a fallback, else other browsers might default to serif if they can't work it out.

Demo: http://jsfiddle.net/ndFTL/12/

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • 3
    @Radek you are aware, though, that this works only if that specific font is installed on the client's machine? I get Times New Roman in the fiddle - I would at least use `Sans-Serif` as the last fallback. – Pekka Apr 10 '11 at 18:16
  • @Pekka I know I must use Sans-Serif as a fallback, thank you :) –  Apr 10 '11 at 18:45
  • 4
    @Radek but I don't really see the point in using this - you can safely assume 95%-99% of computers don't have this font installed. Is this for your computer only? – Pekka Apr 10 '11 at 18:56
  • 1
    Any Mac does, so depending on your site, that might be 90%. I agree though, you can't guarantee that the font will show up across platforms. – Rich Bradshaw Apr 10 '11 at 19:35
  • I guess all Cocoa developers use a Mac so this won't be a problem. My website is about Cocoa :) –  Apr 10 '11 at 19:50
  • It is a pretty awesome font... I've never really used condensed type, but this looks good. – Rich Bradshaw Apr 10 '11 at 20:08
  • It's worth noting that this doesn't work with Firefox on the Mac (as of this writing). Combining this with Lancee Ly's suggestion below should work for both rendering engines. – af__ Oct 19 '11 at 19:41
  • 1
    works well in the safari webviews browsers of iOs5 and iOs6 too. thanks a lot! – Guillaume Gendre Apr 02 '13 at 11:58
  • Some fonts have their PostScript file names online, which is the case for Myriad Pro (*MyriadPro-BoldCond*): http://store1.adobe.com/cfusion/store/html/index.cfm?store=OLS-US&event=displayFont&code=MYRP70012000 – marquito Sep 04 '13 at 13:34
  • 4
    While `font-family` doesn't generally accept PostScript font name (as I tried in Firefox with another font, doesn't work), [`@font-face { src: local(...) }` does](http://www.w3.org/TR/css3-fonts/#src-desc). That means you can do things like `@font-face { font-family: Helvetica; font-weight: bold; src: local(HelveticaNeue-CondensedBold); }`. – Thai Dec 18 '13 at 22:45
  • As I recall, Firefox used `font-family: "Helvetica Neue Condensed Bold"`. – sam Jan 31 '14 at 20:20
  • The best way is to buy a webkit packet ready to use of the font. You can find those at myfonts. Base 64 encoded css will work even in pdf templates (ruby on rails using wickedpdf). I – m0000g Feb 05 '15 at 13:45
  • I had the same problem with Open Sans Condensed. The Open Sans Condensed family contains only the bold style. Light and light italic are somehow in the Open Sans family (as opposed to Open Sans Condensed). This answer solved my problem. – Daze May 05 '15 at 11:56
  • @sam Both Firefox and IE/Edge require font-weight and font-stretch specified explicitly for such local fonts: `font-family: "HelveticaNeue-BoldCondensed", "HelveticaNeue"; font-weight: bold; font-stretch: condensed;` http://jsfiddle.net/adanchenkov/ndFTL/1819/. Imported fonts properties are set with @font-face and used accordingly. – Alexei Danchenkov Nov 24 '15 at 21:11
39

I had the same problem and trouble getting it to work on all browsers.

So this is the best font stack for Helvetica Neue Condensed Bold I could find:

font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;

Even more stacks to find at:

http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/

Melros
  • 1,238
  • 2
  • 18
  • 34
12

In case anyone is still looking for Helvetica Neue Condensed Bold, you essentially have two options.

  1. fonts.com: License the real font as a webfont from fonts.com. Free (with a badge), $10/month for 250k pageviews and $100/month for 2.5M pageviews. You can download the font to your desktop with the most expensive plan (but if you're on a Mac you already have it).
  2. myfonts.com / fontspring.com: Buy a pretty close alternative like Nimbus Sans Novus D from MyFont ($160 for unlimited pageviews), or Franklin Gothic FS Demi Condensed, from fontspring.com (about $21.95, flat one time fee with unlimited pageviews). In both cases you also get to download the font for your desktop so you can use it in Photoshop for comps.

A very cheap compromise is to buy Franklin from fontspring and then use "HelveticaNeue-CondensedBold" as the preferred font in your CSS. 

h2 {"HelveticaNeue-CondensedBold", "FranklinGothicFSDemiCondensed", Arial, sans-serif;}

Then if a Mac user loads your site they see Helvetica Neue, but if they're on another platform they see Franklin.

UPDATE: I discovered a much closer match to Helvetica Neue Condensed Bold is Nimbus Sans Novus D Condensed bold. In fact, it is also derived from Helvetica. You can get it at MyFonts.com for $20 (desktop) and $20 (web, 10k pageviews). Web with unlimited pageviews is $160. I have used this font throughout (i.e. NOT exploiting the Mac's built in "NimbusSansNovusDBoldCondensed" at all) because it leads to a design that is more uniform across browsers. Built in HN and Nimbus Sans are very similar in all respects but point size. Nimbus needs a few extra points to get an identical size match.

Greg
  • 2,523
  • 4
  • 22
  • 27
  • Really, really good find. Nimbus Sans is definitely closer than Franklin Gothic. In fact, I compared the original Helvetica version in Font Book side-by-side with the Nimbus font and actually found the latter to be more crisp. They're otherwise identical twins. – Aquarelle Feb 12 '15 at 21:02
4

"Helvetica Neue Condensed Bold" get working with firefox:

.class {
  font-family: "Helvetica Neue";
  font-weight: bold;
  font-stretch: condensed;
}

But it's fail with Opera.

Lancee Ly
  • 93
  • 5
3

You would have to turn your font into a web font as shown in these SO questions:

However, you may run into copyright issues with this: Not every font allows distribution as a web font. Check your font license to see whether it is allowed.

One of the easiest free and legal ways to use web fonts is Google Web Fonts. However, sadly, they don't have Helvetica Neue in their portfolio.

One of the easiest non-free and legal ways is to purchase the font from a foundry that offers web licenses. I happen to know that the myFonts foundry does this; they even give you a full package with all the JavaScript and CSS pre-prepared. I'm sure other foundries do the same.

Edit: MyFonts have Helvetica neue in Stock, but apparently not with a web license. Check out this list of similar fonts of which some have a web license. Also, Ray Larabie has some nice fonts there, with web licenses, some of them are free.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088