Railway•12mo ago

Canvas custom font not registering

Hello i use node-canvas in my discord bot but when register font locally it works but when its deployed it don't, any tips why?

registerFont(`${__dirname}/../../fonts/Poppins-Bold.ttf`, {
  family: "Poppins",
  style: "bold",
});

registerFont(`${__dirname}/../../fonts/Poppins-Bold.ttf`, {
  family: "Poppins",
  style: "bold",
});

It just make the text with the default font

Solution:

https://github.com/brody192/node-canvas-fonts

Jump to solution

39 Replies

Percy•12mo ago

Project ID: 628e9bd7-1359-4b90-aa85-0c48855bd942

MaraSorg•12mo ago

628e9bd7-1359-4b90-aa85-0c48855bd942

    ctx.fillStyle = "white";
    ctx.textAlign = "center";
    ctx.font = "bold 18px Poppins";
    ctx.fillText(shape.memberName, circleX, rectY + 80);

    ctx.fillStyle = "#4e4e6a";
    ctx.textAlign = "center";
    ctx.font = "semi 12px Poppins";
    ctx.fillText(shape.memberUsername, circleX, rectY + 95);

    ctx.fillStyle = "#676786";
    ctx.textAlign = "center";
    ctx.font = "semi 14px Poppins";
    ctx.fillText(
      Math.floor(shape.voiceTimeMs / 60000) + " minutes",
      circleX,
      canvasHeight - 20
    );

    ctx.fillStyle = "white";
    ctx.textAlign = "center";
    ctx.font = "bold 18px Poppins";
    ctx.fillText(shape.memberName, circleX, rectY + 80);

    ctx.fillStyle = "#4e4e6a";
    ctx.textAlign = "center";
    ctx.font = "semi 12px Poppins";
    ctx.fillText(shape.memberUsername, circleX, rectY + 95);

    ctx.fillStyle = "#676786";
    ctx.textAlign = "center";
    ctx.font = "semi 14px Poppins";
    ctx.fillText(
      Math.floor(shape.voiceTimeMs / 60000) + " minutes",
      circleX,
      canvasHeight - 20
    );

Brody•12mo ago

it's likely that your path is just incorrect @Vin do you see what could be causing the font to not get loaded?

MantisInABox•12mo ago

Unfortunately, I’m not too familiar with node-canvas I’d have to play with it and see what’s going on

Brody•12mo ago

but is that a proper path? looks like it could be simplified?

MantisInABox•12mo ago

The way it’s being called there feels like it would be treated as a system font, instead of an imported one If it can’t find it, it will default to actual system fonts

Brody•12mo ago

@marasorg - are you providing this font in your repo?

MantisInABox•12mo ago

This doesn’t look promising

MantisInABox•12mo ago

No docs

Brody•12mo ago

this is more likely the correct package https://www.npmjs.com/package/canvas

MantisInABox•12mo ago

They said node-canvas not canvas

Brody•12mo ago

maybe the path is correct, but the container is missing the lib that would read the font file?

Brody•12mo ago

Brody•12mo ago

npm names are confusing this would still count as node-canvas

MantisInABox•12mo ago

This is why I don’t use node

Brody•12mo ago

fair register font doesn't return an error 🙄

MantisInABox•12mo ago

But according to the canvas docs, the implementation is correct

Brody•12mo ago

correct, though probably sub optimal import path

MantisInABox•12mo ago

Might be time to throw some console.log() statements. Unless someone familiar with the package knows what’s going on

Brody•12mo ago

no one is familiar with npm packages

MantisInABox•12mo ago

Fair

MaraSorg•12mo ago

yea

Brody•12mo ago

im working on a test, will get back to you!

MaraSorg•12mo ago

MaraSorg•12mo ago

thx! what do you use?

Brody•12mo ago

he uses perl

MaraSorg•12mo ago

Brody•12mo ago

sometimes even assembly if he feels like it

MaraSorg•12mo ago

https://tenor.com/view/gentleman-giga-chad-sigma-male-gif-25702945

Tenor

Brody•12mo ago

im not even joking

MantisInABox•12mo ago

He’s really not joking. Perl, python, PHP, go, c#, you name it

Brody•12mo ago

and thats only a tiny fraction of the languages

Brody•12mo ago

@marasorg - https://test-service2.up.railway.app/

Solution

Brody•12mo ago

https://github.com/brody192/node-canvas-fonts

MaraSorg•12mo ago

wait... i will check it The register was no err but while generating image i got

(process:22020): Pango-WARNING **: 20:36:57.742: couldn't load font "Poppins Bold Not-Rotated 28px", falling back to "Sans Bold Not-Rotated 28px", expect ugly output.

(process:22020): Pango-WARNING **: 20:36:58.349: couldn't load font "Poppins Bold Not-Rotated 18px", falling back to "Sans Bold Not-Rotated 18px", expect ugly output.

(process:22020): Pango-WARNING **: 20:36:58.354: couldn't load font "Poppins Bold Not-Rotated 12px", falling back to "Sans Bold Not-Rotated 12px", expect ugly output.

(process:22020): Pango-WARNING **: 20:36:58.363: couldn't load font "Poppins Bold Not-Rotated 14px", falling back to "Sans Bold Not-Rotated 14px", expect ugly output.

(process:22020): Pango-WARNING **: 20:36:57.742: couldn't load font "Poppins Bold Not-Rotated 28px", falling back to "Sans Bold Not-Rotated 28px", expect ugly output.

(process:22020): Pango-WARNING **: 20:36:58.349: couldn't load font "Poppins Bold Not-Rotated 18px", falling back to "Sans Bold Not-Rotated 18px", expect ugly output.

(process:22020): Pango-WARNING **: 20:36:58.354: couldn't load font "Poppins Bold Not-Rotated 12px", falling back to "Sans Bold Not-Rotated 12px", expect ugly output.

(process:22020): Pango-WARNING **: 20:36:58.363: couldn't load font "Poppins Bold Not-Rotated 14px", falling back to "Sans Bold Not-Rotated 14px", expect ugly output.

Brody•12mo ago

yeah I got that on windows too, but works fine on railway as you can see by my demo site

MaraSorg•12mo ago

i will try it, wait

MaraSorg•12mo ago

Its working, thanks!

Brody•12mo ago

no problem!

Gaming

Programming

Canvas custom font not registering