How can I use Helvetica Neue Condensed Bold in CSS

Question

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    Could anyone please help me out

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You would have to turn your font into a web font as shown in these SO questions    Non-Standard fonts in web  How to add some non-standard font to a website    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

User · Answer

In case anyone is still looking for Helvetica Neue Condensed Bold  you essentially have two options    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   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

[css] How can I use Helvetica Neue Condensed Bold in CSS?

Examples related to css

Examples related to fonts