Search code examples
javascriptnode.jsdiscord.jsnode-canvas

Node canvas use fallback font for unknown characters

I'm using Node-Canvas to print text on an image and trying to figure out how to ensure strange characters are displayed correctly, even if the main font can't display them.

From what I found online you have to use registerFont with a font that can display those characters to fall back on, but it seems like it doesn't use it automatically, and I couldn't find anything on how to tell it do use a fallback font.

When registering a font that can display the character (Code2000) it still appears like this (the "ᗩ" character isn't displayed correctly):

(Trying to print HELLO WORLD, I'M ᗩcł!)
This is my code:

//load some fallback fonts for custom characters (arial & code2000 in this case)
canvas.registerFont('./Assets/Fonts/arial.ttf', {family: 'Arial'})
canvas.registerFont('./Assets/Fonts/code2000.ttf', {family: 'Code2000'})
//load the Uni Sans Heavy custom font
canvas.registerFont('./Assets/Fonts/Uni_Sans_Heavy.ttf', {family: 'Uni Sans'})
let cnvs = canvas.createCanvas(740, 260)
let ctx = cnvs.getContext('2d')
ctx.fillStyle = "#fff"
ctx.font = '50px Uni Sans'
ctx.fillText(`HELLO WORLD, I'M ᗩcł!`, 50, 100);
    
message.channel.send({files: [{ attachment: cnvs.toBuffer() }]}).catch(allerrors)

The "Code2000" font can display the character correctly for sure, so I thought it'd automatically fall back to that, but it doesn't. Is there a way to use the fallback font automatically? If not, how do I tell it which characters to use it on?

Solution

  • You just need to specify 'Code2000' when you're setting the font. Consecutive fonts separated by commas are used as fallback fonts.

    ctx.font = '50px Uni Sans, Code2000'

    I tested this myself, and it worked perfectly.