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

Question

So the question is, how can I use "Helvetica Neue Bold Condensed" in the HTML5 Canvas.

---

I've tried:

context.font = "20pt 'HelveticaNeue-BoldCondensed'";
context.font = "20pt 'HelveticaNeue-CondensedBold'";
context.font = "20pt 'Helvetica Neue Bold Condensed'";

none of them work.

Answer 1

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/