How to Use Helvetica Neue Condensed Bold in CSS

How can I use Helvetica Neue Condensed Bold in CSS?

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/

How to use the Helvetica Neue Bold Condensed in the HTML5 Canvas

There's a couple of different things that could be wrong:

1. Are you including the web-font (if you aren't assuming it's on your own computer)? You can double-check this by setting the font-family to another, plain HTML element and see it if works.
2. Do you have the proper files in the correct format for your browser/version?
3. You're not calling it by it's "actual" font family name. Sometimes these can be bizarre, so you may need to check with a font viewer or an online service.
4. Ol' man Miedinger is haunting you because you're stealing his greatest work.

I would encourage you not to use fonts that you do not have a legal license to use as web fonts. :) Google and other vendors have a lot of good, free stuff out there. Use that.

It apparently doesn't matter if you omit the font-weight or font-style, although you need to make sure and match the font-weight and font-styles in your @font-face definition(s).

However, bizarrely you can end up with some strange results:

context.font = '40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();

context.font = 'normal Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();

http://jsfiddle.net/userdude/tceh5/1/

You would think it still had enough to work with, but this gives:

Leading me to believe you need to be careful and probably be as descriptive as possible. It can apparently use 40pt Rye, while normal Griffy just gets ignored for the default 10px Sans-Serif.

HTML

<canvas id="mycanvas" width="400" height="300"></canvas>​

CSS

@font-face {
    font-family: 'Griffy';
    font-style: normal;
    font-weight: 400;
    src: local('Griffy'),
         local('Griffy-Regular'),
         url(http://themes.googleusercontent.com/static/fonts/griffy/v1/f4FUXlL5FPqftKJ2T0mqXg.woff) format('woff');
}
@font-face {
    font-family: 'Rye';
    font-style: normal;
    font-weight: 400;
    src: local('Rye Regular'),
         local('Rye-Regular'),
         url(http://themes.googleusercontent.com/static/fonts/rye/v1/o1b_1mvE63vyDpMCbEPL_A.woff) format('woff');
}
@font-face {
    font-family: 'Jolly Lodger';
    font-style: normal;
    font-weight: 400;
    src: local('Jolly Lodger'),
         local('JollyLodger'),
         url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}​

Javascript

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

context.font = 'normal 40px Griffy';
context.fillText("StackOverflow", 20, 50);
context.fill();

context.font = 'normal 40px Rye';
context.fillText("StackOverflow", 20, 100);
context.fill();

context.font = 'normal 40px "Jolly Lodger"';
context.fillText("StackOverflow", 20, 150);
context.fill();​

http://jsfiddle.net/userdude/tceh5/

CSS - Helvetica Neue Condensed not rendered properly on macOS

I had the same issue with some versions of Helvetica Neue Condensed some time ago. Using the version form Linotype should fix the baseline issue :

https://www.linotype.com/fr/1245395/neue-helvetica-famille.html

Therefore, the font should be rendered almost the same way on every system.

CSS Font Helvetica Neue

This font is not standard on all devices. It is installed by default on some Macs, but rarely on PCs and mobile devices.

To use this font on all devices, use a @font-face declaration in your CSS to link to it on your domain if you wish to use it.

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Taken from css3.info

all css font-family definitions in firefox inspector striked through

Do you see that the font-family is "Helvetica Neue Condensed Bold" or do you see that the font resource used for the font-family is "Helvetica Neue Condensed Bold"? Because those are two completely different things. It sounds like the latter, in which case: CSS asks the browser for "a font" based on the names provided.

1. The browser checks if it has any explicit resources bound (using @font-face) and if not, it asks the OS for a font that matches the name CSS specified.
2. If the OS can't find them, CSS falls back to the next font and tries again. Steps 1 and 2 repeat until we run out of resources.

At any point, the browser or OS are allowed to go "yeah I found something" provided the name a resource they know of matches "well enough", so if you ask for Helvetica Neue, and the OS ends up being asked for that, then it can go "oh yeah I have a Helvetica Neue here" and then give the browser Helvetica Neue Condensed. That is 100% acceptable: it's one of the many legal matches for "Helvetica Neue" because that's the actual family name, and "Regular", "Condensed", "Thin", "Oblique", etc. are not.

If that isn't acceptable to you as develop, then your CSS needs to become more precise: either start only accepting 'Helvetica Neue Regular', which is a bad plan, or load an actual font so that you properly control which font will get used, without the OS getting consulted. Especially for a font that only Mac users will have installed (unix, linux, and windows users all do not: and would need to buy it first), and so is a guaranteed breaking on other platforms.

Create an @font-face rule with the font you want, with a font-family like ContentFont (so that if you want a different font later, all you have to do is replace the src binding, without changing any content CSS) and then point that to a true .woff font resource (without using local() because again, no guarantee you'll get what you ask for, it might resolve "good enough" while to human eyes being absolutely wrong)

CSS - Linking to custom fonts - Regular is working, Bold is not

you need to have each src in a different font-face, look at this example taken from Google fonts.

In your example you are changing the font-family name (which is fine) but then whenever is bold you would have to give that changed name.

It is better to keep the same font-family.

@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Sans'), local('JosefinSans'), url(https://fonts.gstatic.com/s/josefinsans/v9/xgzbb53t8j-Mo-vYa23n5ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z3NuWYKPzoeKl5tYj8yhly0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face not working as oblique

So turns out that for some reason, ie will not allow font family names over 4 words. I just changed the name to 'helveneueblack condensed oblique' and problem solved. whoop

@font-face fonts showing blurred on Mac in Safari and Chrome

All browsers render fonts in a different way. Try -webkit-font-smoothing: antialiased; for Safari and see if it makes a difference. Also, try using relative length units.

---

Related Topics