Sharp: Pango Error: Fonts failed to load.

[grangus]

So, basically. I'm trying to overlay an image with svg text.

const text = new Buffer(
<svg height="90" width="200"><text x="45" y="65" fill="white" font-weight="bold">Some text</text></svg>
);

sharp(file) .overlayWith(text) .resize(65, 65) .toFile(outputFile, (error) => { if(error){ console.log(error); } else { //do something }

When I do this, I get the following errors.

*`(sharp:7696): Pango-WARNING *: couldn't load font "Times New Roman, Not-Rotated
12", falling back to "Sans Not-Rotated 12", expect ugly output.

(sharp:7696): Pango-WARNING **: couldn't load font "Sans Not-Rotated 12", fallin
g back to "Sans Not-Rotated 12", expect ugly output.

(sharp:7696): Pango-WARNING **: All font fallbacks failed!!!!

(sharp:7696): Pango-WARNING : All font fallbacks failed!!!!`

I'm not sure what I'm doing wrong. I'm rather new to programming so if someone could tell me what I'm doing wrong, I would greatly appreciate it.

[lovell]

Hello, libvips renders SVG files with librsvg, which renders fonts with pango, which searches for fonts with fontconfig, which should look in your system font directory/ies.

You haven't said which platform you're using, but on Linux fonts are usually in /usr/share/fonts/ and on OS X in /System/Library/Fonts or /Library/Fonts.

Do these paths exist? Do they contain the font you're looking for, in this case "Times New Roman"?

[grangus]

I'm currently using Windows. I know for a fact that the font does exist because it does render the SVG sometimes, and then it randomly gives an error.

[lovell]

If the problem is randomly occuring then I suspect a problem local to font discovery on your machine. Perhaps try setting the FC_DEBUG environment variable, with the most verbose level being FC_DEBUG=8191. Good luck!

https://www.freedesktop.org/software/fontconfig/fontconfig-user.html#DEBUG

[grangus]

Thanks! I'll look into this.

[XueSeason]

awesome. save my time.

[simeyla]

I'm literally using font-family='Arial' and getting the same issue. So it's not just that the font can't be found. I'm running on a single machine with the same exact same overlaid SVG. The image is normally cached, but I've added a random cache busting timestamp.

I think it must be a resources / race condition type of issue - it's an Angular application which auto reloads. When I refresh the app the server gets bombarded with requests from all the devices I'm testing on (iPad/iPhone/multiple browser windows/multiple images). So I think the server just can't cope.

I'll try to add FC_DEBUG but I'm new to NodeServices under dotnetcore and will have to lookup tomorrow how to do that.

[jsnico]

If the problem is randomly occuring then I suspect a problem local to font discovery on your machine. Perhaps try setting the FC_DEBUG environment variable, with the most verbose level being FC_DEBUG=8191. Good luck!

https://www.freedesktop.org/software/fontconfig/fontconfig-user.html#DEBUG

Hello,

I've got the same errors occured randomly in async mode in a little loop (maximum 5 times, could be only maximum 2 times).
So to resolve this issue I've used "await" operator and no more errors with the font issue.

Nicolas.

[piotr-cz]

Error comes up when processing multiple images in parallel:

files.map(([source, dest]) =>
  sharp(path).toFile(dest)
)

When in sequence - it doesn't:

for (let [source, dest] of files) {
  await sharp(source).toFile(dest)
}

[lovell]

Please see #1277 for why this occurs on Windows.