registerFont() not working and getting couldn't load font , falling back to "Sans", on any canvas version

[hassannaftabb]

I have been trying to register custom fonts in the node-canvas, I have been trying it to do with registerFont() function, I am using [email protected] , tried with [email protected] also, my implementation for registering fonts is like this:

import { createCanvas, registerFont } from 'canvas';
registerFont('fonts/Sora/static/Sora-Bold.ttf', {
  family: 'Sora',
});

I have this type of structure:

so always i am validating the import's path also, and it's fine.

This is my implementation for using the font in ctx.font , tried all of these:

ctx.font = `41px Sora`;
ctx.font = `41px "Sora"`;
ctx.font = `41px "Sora Bold"`;
ctx.font = `41px Sora Bold`;

When i go inside the font file, the name is only "Sora" i tried adding that, and also tried to change the name in the family key in registerFont to Sora Bold, but nothing works, I am getting this error at any implementation:

(process:9932): Pango-WARNING **: 03:35:49.203: couldn't load font "Sora Bold Not-Rotated 41px", falling back to "Sans Bold Not-Rotated 41px", expect ugly output.

(process:9932): Pango-WARNING **: 03:35:49.212: couldn't load font "Sora Bold 41px", falling back to "Sans Bold 41px", expect ugly output.

I tried all of these solutions:

1. Downgrading canvas module - (tried to downgrade to 2.9.0, but still don't work)
2. Check if font file is valid - (checked , downloaded from google fonts)
3. Use the same name as in opening the font file - (tried but of no use, same error that it couldn't be found)
4. Use "" while adding in ctx.font - (tried but of no use)

I am using NestJS, and tried on node 18, 20 also.

I need to register multiple fonts but it's not even working for one.

Please help me on this as I am stuck, you can download the font from Google Fonts, name's "Sora".

Would appreciate any help.

Thanks.

[hassannaftabb]

@mojodna @kangax @foysavas @stephdau , Kindly help me on this as soon as possible, would appreciate, thank you.

[konyan]

@hassannaftabb plz use this exact version "2.10.2" , it working at my project

[hassannaftabb]

@hassannaftabb plz use this exact version "2.10.2" , it working at my project

@konyan tried, still same error, i am using windows, there could be a problem with my OS? the same is quite working in MAC, but not on my hosted server at AWS ECS, having hard time resolving that.

[akanshSirohi]

@konyan I faced the same issue on latest version but v2.10.2 working perfectly fine for me!

[dukhevych]

2.10.2 works fine on Win10x64

[itxtoledo]

2.10.2 works

[konalt]

2.10.2 used to work until I upgraded to the latest LTS version of Node. Then it couldn't find a binary for that version and I had to upgrade to the latest version, which supports Node 20.11.0 but has this font bug.

[konalt]

This seems to be fixed if I compile 2.10.2 myself, but it would save me (and other future users) a lot of hassle if this was either fixed in 2.11.2 or precompiled binaries were available for 2.10.2

[hassannaftabb]

I solved this by installing the fonts into my system. It didn't worked in any other case.
Installing fonts in local system saves a lot of effort of registering fonts and their variants one by one. Allows easy implementation irrespective of configuring repeatedly.

For my cloud server, i used docker image to manually copy the files and install the fonts.

They can be easily installed in cloud servers also. I would recommend this approach.

Downgrading the package versions creates a lot of hassles, most likely dependencies incompatibility issues, as you need to vary your Node version also. Using 2.10.2 and latest LTS Node caused me a lot of dependencies issues.

[teewuane]

@hassannaftabb How do you install the fonts into your system? Do you just drop them into the /usr/shared/fonts/ folder? Is there more to it than that? How did you map your css name to the actual file? Do you just give it the exact same name as the file?

[hassannaftabb]

@hassannaftabb How do you install the fonts into your system? Do you just drop them into the /usr/shared/fonts/ folder? Is there more to it than that? How did you map your css name to the actual file? Do you just give it the exact same name as the file?

For my docker image, yes I copied the fonts file to the root system font configuration which could be /usr/shared/fonts ( may vary for systems ). After copying you need to cache the fonts into the system, you can get these commands easily from ChatGPT.

For my Local windows, I installed the fonts by selecting all the files, right clicking and clicking install, after that only I was able to solve the loading issue.

But keep in mind, wherever you setup the project, the fonts should be installed in that system, requiring from path didn't worked for me.

[Andrekarma]

The 2.10.2 is working fine.
Since the new version 2.11.0 is giving the pango error.
Has anyone looked into this? Seems like the bug is been introduced in this version
@zbjornson @chearon

[Andrekarma]

Could be related to the cairo and pango versions?

Using canvas 2.10.2 that works fine:
Pango version:1.50.11
Cairo version:1.17.6

Using canvas 2.11.2, that has issues:
Pango version:1.50.14:
Cairo version:1.17.8

[Arkirion]

2.10.2 used to work until I upgraded to the latest LTS version of Node. Then it couldn't find a binary for that version and I had to upgrade to the latest version, which supports Node 20.11.0 but has this font bug.

Im pretty noob

This seems to be fixed if I compile 2.10.2 myself, but it would save me (and other future users) a lot of hassle if this was either fixed in 2.11.2 or precompiled binaries were available for 2.10.2

@konalt can you update the compiled ?

[djflorio]

As of 2.11.2, this still seems to be broken. Any updates on this?

[Andrekarma]

Can anyone help on this?

[Puton1221]

I'm encountering an issue where the registerFont() function is not behaving as expected.
I've tried troubleshooting by using different Node.js versions:

• 22.9.0
• 21.7.3
• 20.17.0 (LTS)

However, I continue to receive Pango-related errors. Furthermore, I've attempted to resolve this by installing the fonts on my Windows system and rebooting, but the Pango library still cannot locate the fonts.

[devr77]

Guys simply install font in windows, it is working. Use the font name showing in windows.

[Andrekarma]

@devr77 Simply doesn't work like that

[Andrekarma]

@zbjornson @chearon at least an answer would be great..