Font Encoding or Secondary font

[rcyrus]

Greetings. Thank you for making node-canvas as awesome as it is!

I'm using node-canvas to rasterize content that I had previously created in a web browser.
Almost everything works great, the only exception is non-standard text with custom fontFace.

'normal' text works fine but when I try something extended I get a rectangle instead of the symbol.
Examples:
Text on my browser.

Same text rendered from node-canvas.

The font in question is Quattrocentro.

Quattrocentro does not have that symbol but I was hoping it would fallback to a secondary font to fill in like a browser would.

Is there a way for node-canvas to do this or am I SOL when it comes to extended characters?

[rcyrus]

I should also note that before I start to put things on the canvas I register several TTF files, including one that I know has the symbol i'm looking for: Arial Unicode.

[kevinxucs]

Bump

[isieo]

any workaround for this?

[kangax]

Would love this fixed as well (for fabric.js)

[dmitrig01]

This would be great – any way?

[AdamMerrifield]

It's almost been a year and a half, is there still no fix for this?

[kangax]

@AdamMerrifield node-canvas is in maintenance mode rather than in development. If you (or others) make a patch, chances are someone can pull it in. Otherwise, I don't see this being fixed in any foreseeable future (as much as I would want this fixed myself).

[beaugunderson]

@rcyrus If you compile node-canvas with pango support you'll be able to render using fonts with all of the required characters (like Arial Unicode). I'm not sure of a way to make npm install enable pango support, you'll have to edit binding.gyp and then node-gyp rebuild from within node_modules/canvas.

[rcyrus]

@beaugunderson I'm no longer associated with the project that used node-canvas but hopefully your tip will help others!

Thanks.

[mainfraame]

To fix this issue, install the font as a system font and make sure the name you are using in font-family matches the installed name. I had this issue for a long time using both svg and canvas on a node server.

[jakeg]

If you want fallback fonts and custom fonts then see #410 and do this:

• go into node_modules/canvas
• make these changes to src/FontFace.cc: https://github.com/Automattic/node-canvas/pull/410/files
• edit binding.gyp to set with_pango to 'true'
• node-gyp rebuild (if not installed, "sudo npm install -g node-gyp" first)
• comment out or remove calls to ctx.addFont()
• fallback fonts and custom font loading should now work

Fallback fonts should be installed system-wide with e.g:

• sudo apt-get install fonts-arphic-uming fonts-ipafont-mincho ttf-wqy-zenhei ttf-unfonts-core fonts-takao fonts-dejavu ttf-mscorefonts-installer

Custom fonts just need to be in correct path as per usage in eg:
var myFont = new Font('MyFont', '../fonts/pip.ttf');
myFont.addFace('../fonts/pipBold.ttf', 'bold');

[latipun7]

Sorry to bump the old issue, but I have this same issue when mostly render Japanese, arabic, and other Unicode fonts.

node-canvas version: v2.0.0-alpha.1

I use that version because I want custom fonts with Canvas.registerFont(path_to_font, { family: 'MyFont' })
But when the font doesn't have the glyphs (Japanese, etc), it just shows square and no fallback.

How do I achieve custom fonts (TTF) and fallback fonts using that version? Or is there a better solution?

[chearon]

Are you using Windows? Pango font substitution doesn't work there. But you can specify a comma separated list when you set ctx.font and it should use them in order.

[latipun7]

My dev OS is windows. So I need to specify multiple fonts that support unicode? For example ctx.font = "15px MyFont, Arial, Sans";?

And my end product OS is Ubuntu LTS 16.04, still print square txt. The only attempt in ubuntu I take is only sudo apt-get install fonts-arphic-uming fonts-ipafont-mincho ttf-wqy-zenhei ttf-unfonts-core fonts-takao fonts-dejavu ttf-mscorefonts-installer.

[chearon]

Closed via #715