disable pango

[rvagg]

I can't get custom fonts (in custom locations) working when pango is enabled and there's no easy way to turn it off other than editing binding.gyp. This commit basically reverts 7522aca

See also discussion @ #570

Unless custom font loading can be fixed with Pango or good documentation provided then I'd like to see it disabled.

Likely related are #624 and #618

[LinusU]

Have you looked at how this relates to #410 and #543?

[rvagg]

haven't looked in detail, but something needs to happen because 7522aca was a breaking change that crept in on a minor and by the issues filed here it's clear that it's causing a lot of pain

[LinusU]

Also, on my computer (OS X 10.11, was also present in 10.10) trying to render text to the canvas, when built with pango, breaks every further draw call without giving any errors. If I start by rendering text, I get a blank canvas, otherwise I get whatever I drew up 'til the first text call.

I'm very much +1 on merging this until we can get it working stable across the board.

[jakeg]

Very much against this. We use pango for font fallbacks and not having it would be a show stopper for us. Is it just on osx where people are having problems with this? My usage is Linux (Ubuntu) only.

[jakeg]

Isn't this caused by the issue shown in #525 ? Or is it something completely different?

[rvagg]

my problem is Linux, at this stage I have no clue how to make custom fonts work for nodei.co without this patch applied, Pango has entirely screwed up the config, this should have been done in a minor version bump if at all

[LinusU]

@jakeg What do you mean with font fallbacks? I'm not entirely sure myself on what pango does for us so it would be nice with some insight :)

[jakeg]

@LinusU firstly, big thank you for all your work the last few weeks, the project was looking rather abandoned before you turned up!

Try using a glyph that isn't within the currently set font. Pango enables you to set multiple fonts to use as fallbacks for those glyphs, but without pango the glyph doesn't get rendered at all! Try eg Chinese, Korean or Arabic letters.

[LinusU]

Thank you, it's always nice to know that your work is appreciated :)

This helps me understand the issue as well, I'm gonna try and dig deeper into the issues I'm having and see if there is a way to properly solve it.

[jacobp100]

+1 for this being applied. Using Ubuntu, it doesn't crash, it just doesn't load custom fonts. From what it looks like, the Pango rendering requires the font to be installed on the system, which is not possible for my uses.

[cyjake]

Guys, any update on this? 😕

[tomerb15]

@LinusU or @jakeg Is this fixed? I have node installed on a Ubuntu server and I'm having issues with using custom fonts.
This works great on my development computer (macbook pro with the latest OSX)

What I'm experiencing is that the custom font which is located in the same files hierarchy is completely ignored, and the default font is used. Also the font size is also ignored.

Any idea how can i fix it on the Ubuntu server?

UPDATE: Changing manually the binding.gyp to disable pango didn't work.

[LinusU]

@tomerb15 I had the exact problem myself, with the same setup (OS X locally, Ubuntu in the cloud). Manually changing the binding.gyp did work for me though.

I would love to see if #410 + #543 could solve this, it would be better then disabling pango since some of our users rely on it.

[tomerb15]

What solved the problem was commenting out:
ctx.addfont(Fontobj) on the Ubuntu server.
Locally on the Osx this line was still needed.

[LinusU]

Did you recompile (node-gyp rebuild) after editing binding.gyp?

[tomerb15]

Nope :-) probably should have. But like I said just commenting out:
ctx.addfont
Did the trick as well

[LinusU]

Then it's probably loading the font from the system fonts instead of from your file.

[chearon]

+1

Or get Pango working somehow. Seems like a lot of issues can be closed by getting Pango to work or removing it.

Also:

• The changes from Load font file in FontConfig when using Pango #410 are already in master from @jakeg's changes in 7522aca. it should be closed
• Unify the API for working with fonts when Pango is enabled. #543 did not help this problem for me. The only thing that gets custom fonts working for me is disabling Pango, but I hate having to tell everyone to do that on their computers and then avoid updating

[jakeg]

Ok, going through my project files looking for all relevant stuff for this as I can see this is really coming to a head for some people now...

As far as I can see, you can use Pango without system-installed fonts, but fallback fonts do need to be system installed (and I think you need to have/use fontconfig for them too?) if you want them to work. You don't get fallback fonts without pango, so no loss there if you can't do system installed fonts.

What are fallback fonts? So if you're using a font and a glyph doesn't exist in that font, you want that glyph displayed in a different font - the fallback font - instead (otherwise it will just be e.g. an empty rectanglle). I run this command to install a ton of fallback fonts on my Ubuntu server:

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

So as well as system-installing those fallback fonts, I go and grab all the Google web fonts too with this handy little script I made:
https://twitter.com/AllYearbooks/status/512937396552212480

Note that for sanity, I use FVD naming (see https://github.com/typekit/fvd) for fonts and my script above handles that perfectly, renaming all the Google web fonts with sane FVD naming instead.

With those fonts all installed, I then use something like this to actually use the fonts. Remember, as we're using pango, we can't do ctx.addFont(). new Canvas.font() yes myfont.addFace() yes, ctx.addFont() no.

var myfonts = [];
var addedfonts = [];

// then for each font
var font = 'Roboto Slab:n7'; // example font using FVD naming as above
var bits = font.split(':');
var name = bits[0].replace(/ /g, '_'); // global match else just replaces first
var filename = name + '.' + bits[1] + '.ttf';

if (fs.existsSync(dir + filename)) {
  if (!myfonts[bits[0]]) {
    // add first variant for this font
    //console.log('adding font', bits[0]);
    myfonts[bits[0]] = new Canvas.Font(bits[0], dir + filename);
    addedfonts[bits[0]] = {};
  }

  // add face/variant to existing font
  // ... this bit used to be in else block but surely that wouldn't work sometimes?
  if (!addedfonts[bits[0]][bits[1]]) {
    //console.log('adding face', bits[0], bits[1]);
    myfonts[bits[0]].addFace(dir + filename, bits[1][1] + '00', bits[1][0] == 'i' ? 'italic' : 'normal'); // path, weight, style
    addedfonts[bits[0]][bits[1]] = true;
  }
}
else {
  // font file not saved on server yet. fetch it then use it
  // TODO: as this is async, if font hadn't already been saved then won't use it for this request, only subsequent ones. fix this
  console.log('font file not found. try running google_fonts_downloader.js again?', dir + filename);
}

Note that if you installed all the fallback fonts, no matter what font you are currently set to in ctx the following should output fine as all the missing glyphs in that font will find one to fallback on:

ctx.fillStyle = '#000';
ctx.fillText("English: Some β text in Impact.", 10, 10);
ctx.fillText("Japanese: 図書館の中では、静かにする。", 10, 30);
ctx.fillText("Arabic: اللغة العربية هي أكثر اللغات تحدثا ضمن", 10, 50);
ctx.fillText("Korean: 모타는사라미 못하는 사람이", 10, 70);

[jakeg]

If it wasn't clear from my post above, only the fallback fonts need to be installed system-wide, not your regular usage fonts. All the other fonts can go wherever you want (though may require fontconfig being used/installed?) and get added with new Canvas.Font('Roboto slab', '/path/to/somefont.ttf'). I believe being consistent with the font naming is crucial though, hence one reason I use FVD. It's a while since I worked on this code though.

[chearon]

The fallback font stuff comes from FontConfig, though, no? The way the code is now you would get the font substitution like you said which is great.

I understand that with Pango support you just use new Canvas.Font and it should work with a custom TTF. I spent hours reading the source yesterday; calling the Font constructor calls FontFace, which is what adds it to FontConfig here. Those lines are executing but Pango still seems to end up with the wrong font. Something is going wrong between FontConfig and Pango for those of us that can't get it working

[chearon]

OH I think this is an OS X issue. Pango doesn't use FontConfig on OS X! It needs to use CoreText somehow in this case... that'd explain why the people who have no problem with it are always using Ubuntu...

[jakeg]

@chearon pango can't use fontconfig or you mean because fontconfig isn't installed on OSX?

http://apple.stackexchange.com/questions/118737/does-osx-10-9-1-have-fontconfig-installed-by-default
... suggests you can install fontconfig using MacPort (sudo port install fontconfig) or Homebrew (sudo brew install fontconfig).

[chearon]

@jakeg I suspected that OS X Pango was using something other than FontConfig to look up fonts. Now I'm not sure about that, but the problem lies somewhere with FontConfig + Pango. I tried making a standalone C program that loaded a font from a file and added it to FontConfig exactly the way the creator of Pango recommends, and it did not render on Mac OS :(

[LinusU]

@jakeg Please never use sudo with brew!

@chearon Appreciate you looking into this! I should add that loading fonts from ttf-files doesn't work for me on Ubuntu 14.04 when built with pango. When building without it works. I have the same problem on OS X as well, so I don't think it's only an OS X issue...

[chearon]

@LinusU you didn't call ctx.addFont, right? If you use addFont then when you set ctx.font later, it will not update the Pango context, instead using the old Cairo methods which basically has no effect. Another thing I think should be fixed

edit: referring to your Ubuntu test case

edit2: also, for examples/font.js you need to change "pfenningFont" to "Pfenning". Since Pango goes through the font resolver stack (FontConfig or CoreText) you don't get to name the font manually.

[zbjornson]

Since v2.0 made Pango required, can this be closed?

[chearon]

Yup! I'm going to go through now and close all the issues I listed forever ago in #715