0

I would like to know how to get a name of the font I installed to pass to HTML5 canvas context to set the font.

I am using node-canvas, and trying to set a font to unleanred.

After downloading and installing the font, I tried this to set the font:

var canvas = new Canvas(370, 120)
  , ctx = canvas.getContext('2d');

ctx.font = 'bold 30px unlearned';
ctx.fillText('foo', 25, 45);

But the font remains unchanged in the output. When I download some other fonts, say drafting, and install it, the above works.

So I think the problem is that I am using a wrong name to reference the font. How can I get the correct name and type?

mc9
  • 6,121
  • 13
  • 49
  • 87
  • Simplest is to check what a DTP program on your OS calls the font (Office document writer, Photoshop, whatever) and then use that name. – Mike 'Pomax' Kamermans Sep 12 '15 at 18:07
  • Or, alternatively, because technically you're using web technology: you can define a CSS @font-face with a name that is easy, like "myfont". Then in the canvas, load `ctx.font = "bold 30 myfont";` although of course if you're running this in "not the browser", I have no idea how to load an @font-face in, so npmjs.org might be necessary there – Mike 'Pomax' Kamermans Sep 12 '15 at 18:16
  • @Mike'Pomax'Kamermans When I check in Microsoft Word, I only see one of the fonts that I installed. I have installed ~5 fonts. How can I make the fonts show up? – mc9 Sep 12 '15 at 22:54
  • did you install 5 fonts, in the same font family, or did you install 5 completely unrelated fonts? Because if they're in the same family (but "light", "regular", "medium", "condensed", etc) then the base name is the name you get. For loading as web content *without @font-face* you can just use that name, and pick the appropriate style and weight. – Mike 'Pomax' Kamermans Sep 13 '15 at 00:23
  • That makes sense. But they are all 5 different fonts. Some work and some do not. Only one shows up in Microsoft Word. – mc9 Sep 13 '15 at 01:59
  • If Word doesn't see the others, it's almost guaranteed nothing else will, either. I'd recommend finding out how you can load them from file for your canvas directly, instead of relying on the OS, by using an @font-face CSS rule. – Mike 'Pomax' Kamermans Sep 13 '15 at 17:19

0 Answers0