Automattic / Automattic/node-canvas

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

Open
#2,285 22 comments 8 reactions 0 assignees View on GitHub
Text & Fonts
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

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 **canvas@2.11.2** , tried with **canvas@2.9.0** 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:

![image](https://github.com/Automattic/node-canvas/assets/87358302/dd510323-b242-424e-b6dc-df943a1106f5)
![image](https://github.com/Automattic/node-canvas/assets/87358302/8525b1e7-da6f-45ee-9ec9-6b2d49ef78ac)

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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.