Unable to Use Custom Fonts Windows 10

borment1234 commented 4 years ago

Issue or Feature

I have exhausted every guide on the web. I am currently unable to use any custom font on Windows 10. Error message: Pango-WARNING **: 12:15:05.151: couldn't load font "Roboto Light Not-Rotated 25px", falling back to "Sans Light Not-Rotated 25px", expect ugly output.

Steps to Reproduce

var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');
Canvas.registerFont('src/fonts/Roboto-Light.ttf', { family: 'Roboto-Light' });
ctx.font = '25px Roboto-Light';
ctx.fillText('ABC', 0, 0);
// etc.

Your Environment

Version of node-canvas (output of npm list canvas or yarn list canvas):
Environment (e.g. node 4.2.0 on Mac OS X 10.8): Node v14.4.0 on Windows 10 x64 Canvas v2.6.1

chearon commented 4 years ago

That error happens when the family wasn't listed by Windows (specifically EnumFontFamiliesExW). I don't have Windows but I suspect that I wouldn't be able to repro since that's a pretty big failure that (I hope) we would have heard of. So it might be some specific font setting in your system.

Could you set the environment variable PANGO_WIN32_DEBUG=true and run your example again, then paste the output?

almeidx commented 4 years ago

Can reproduce, with a different font.

Error

(process:9848): Pango-WARNING **: 13:44:38.092: couldn't load font "Neufreit Ultra-Bold Not-Rotated 25px", falling back to "Sans Ultra-Bold Not-Rotated 25px", expect ugly output.

Steps to Reproduce

const Canvas = require('canvas');
const canvas = Canvas.createCanvas(200, 200);
const ctx = canvas.getContext('2d');
Canvas.registerFont('Neufreit-ExtraBold.ttf', { family: 'Neufreit' });

ctx.font = '25px Neufreit';
ctx.fillText('ABC', 0, 0);

Environment

Version of node-canvas (output of npm list canvas or yarn list canvas): v2.6.1
Environment (e.g. node 4.2.0 on Mac OS X 10.8): node v12.17.0 on Windows 10 Pro x64 (1909)

Error with PANGO_WIN32_DEBUG flag

https://pastebin.com/raw/90Qqt17a

HeCorr commented 3 years ago

~~I'm having the same issue. Is this gonna be fixed at some point?~~

(read below)

HeCorr commented 3 years ago

Nevermind, I got it working.

From what I can tell, Roboto-Medium (the one I'm using) and probably Roboto-Light as well, have a different font name in the TTF file. It worked fine with me with Roboto-Italic, because it's only called Roboto there, as you can see:

...but Roboto-Medium is not:

I tried multiple code combinations but this is the only one what worked:

registerFont('./fonts/Roboto-Medium.ttf', {family: 'Roboto'}) // only 'Roboto' here. otherwise it doesn't work.
// (...)
ctx.font = '28px Roboto Medium'; // I tried 'Medium 28px Roboto' and it didn't work.
ctx.fillText('text', 10, 10)

So I guess using the font name that shows up when you open the TTF file is the way to go.

I just tested the Light variation as I'm writing this, and it does work without installing the font in the system.

DoormatIka commented 2 years ago

You probably should install the ttf files.

Worked for me

cgodkin commented 2 years ago

Nevermind, I got it working.

From what I can tell, Roboto-Medium (the one I'm using) and probably Roboto-Light as well, have a different font name in the TTF file. It worked fine with me with Roboto-Italic, because it's only called Roboto there, as you can see:

...but Roboto-Medium is not:

I tried multiple code combinations but this is the only one what worked:
registerFont('./fonts/Roboto-Medium.ttf', {family: 'Roboto'}) // only 'Roboto' here. otherwise it doesn't work.
// (...)
ctx.font = '28px Roboto Medium'; // I tried 'Medium 28px Roboto' and it didn't work.
ctx.fillText('text', 10, 10)
So I guess using the font name that shows up when you open the TTF file is the way to go.

I just tested the Light variation as I'm writing this, and it does work without installing the font in the system.

This is sort of a "me too." I was trying to use a custom font on Windows and was having no luck. I was seeing the same error message. We have a number of variations of our custom font and the only one I can get to work is the one with an internal font name having no spaces or hyphens. (Hint to Windows users: Right click on the font in Windows Explorer and Preview will show you the font.)

When I try to use Foo-variation or Foo variation2, the message from Pango only mentions the "root" part of the name:

(process:1172): Pango-WARNING **: 17:15:14.991: couldn't load font "Foo 10px", falling back to "Sans 10px", expect ugly output.

I don't know if that will help someone fix this, but I too am in business now (finally). Thanks, @HeCorr!

cgodkin commented 2 years ago

Just to confirm, I got our font person to simply change the "internal name" of one of our fonts from "Foo Bold" to "FooBold" and now it works fine.

p4dd9 commented 1 year ago

I had the same issue under windows 10, node 18.x.x .. having another look at https://www.npmjs.com/package/canvas#registerfont states to wrap the usage in ctx.font font family value in double quotes registerFont(path + '/font/Roboto-Medium.ttf', { family: 'Roboto' }) [...] ctx.font = '112px "Roboto"'

EdinyangaOttoho commented 2 months ago

Does this problem affect Linux users as well?

cgodkin commented 2 months ago

Does this problem affect Linux users as well?

Sorry, I don't know since the app I was working on is Windows only.

Automattic / node-canvas