Sharp: Font issues when rendering SVG to PNG

[thebucknerlife]

Hi,

I'm having trouble getting some fonts to render properly when using them in SVGs. We're using a number of fonts and while _most_ of them working (35ish), 3 aren't playing nice.

I've created two scripts below to illustrate the issue.

Didot - Working Correctly

import * as sharp from 'sharp';

const svgText = `<?xml version="1.0" standalone="no"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xml:lang="en"
  height='857'
  width="4429">
  <text
  text-anchor="middle"
  x="50%" y="50%"
  fill="#ED0013"
  font-size="142.85714285714286"
  font-family="Didot"
  font-style="Regular"
  dy='0'>
  Didot Regular
  </text>
</svg>`;

const buffer = new Buffer(svgText);

sharp(buffer)
  .png()
  .toFile('didot.png');

This outputs the following:

Every looks great.

Brush Script Std - No Font When Rendered

Here is the script for Brush Stroke Std. It's identical to the above, except font-family and font-style:

import * as sharp from 'sharp';

const svgText = `<?xml version="1.0" standalone="no"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xml:lang="en"
  height='857'
  width="4429">
  <text
  text-anchor="middle"
  x="50%" y="50%"
  fill="#ED0013"
  font-size="142.85714285714286"
  font-family="Brush Script Std"
  font-style="Medium"
  dy='0'>
  Brush Script Std
  </text>
</svg>`;

const buffer = new Buffer(svgText);

sharp(buffer)
  .png()
  .toFile('brush script.png');

and here is the output file:

...and for reference, here is a screenshot of what the Brush Script Std svg looks like when I write it to brushscript.svg and open it in Chrome:

Based on another issue posted here, I learned about fontconfig. When I run fc-list, I can see both Didot and Brush Script Std available to fontconfig:

$ fc-list
../Library/Fonts/BrushScriptStd.otf: Brush Script Std:style=Medium,Regular
...
../Library/Fonts/Didot.ttc: Didot:style=Italic,斜體,Kursiv,Kursiivi,Italique,Corsivo,イタリック,이탤릭체,Cursief,Itálico,Курсивный,斜体,Cursiva

I've compared the font types, styles, family names, etc for both Didot and Brush Script Std. In the larger collection of fonts, I have a handful which have the same file type, style, etc. as Brush Script Std so I don't think the issue is with Brush Script Std. I'm having the same problem with two other fonts, and they also have different types, etc.

Any ideas? Maybe some issue with the format of my SVG, etc. Would love any help or ideas. Happy to provide more info or run some additional examples.

Thanks for the help. Sharp has been a pleasure to work with and excited to keep using it :)

[lovell]

Hello, my best guess would be that this is something to do with the format of the font, as one is OTF/OpenType and the other is TTC/TrueType.

../Library/Fonts/BrushScriptStd.otf
../Library/Fonts/Didot.ttc

[jcupitt]

fontconfig has a handy FC_DEBUG environment variable. If you set this before running the program you'll get an incredible amount of logging explaining how fc tried to resolve your font request. It might help track the problem down.

In the longer term, git master libvips (8.7) has a new feature: a fontfile argument to text lets you specify a font file directly rather than relying on fontconfig to find it for you.

[lovell]

@thebucknerlife Were you able to make any progress with this problem?

[lovell]

@thebucknerlife Please feel free to re-open if the problem persists.

[matt-gohr]

I was having a similar issue with AWS lambda not rendering fonts here's what I found out that works for me.

Since the aws lambda environment doesn't seem like it has fonts, you have to download them, package them up with your project and reference the path to them (so sharp can get to them) with the FONTCONFIG_PATH env set to where the fonts will be.

So need to create a font.conf file that has this XML in it, in the same folder where you store the fonts. I stored mine in a folder called fonts

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>/var/task/fonts/</dir>
  <cachedir>/tmp/fonts-cache/</cachedir>
  <config></config>
</fontconfig>
Then in your function set the font path to this:
process.env.FONTCONFIG_PATH='/var/task/fonts'

Then in your function set the font path to this:
process.env.FONTCONFIG_PATH='/var/task/fonts'

the var/task/ path is where your lambda function lives on the aws lambda container. So you just need to create a folder in you project called fonts and put this font.conf file in it along with a font file. And boom, you've got fonts with your shiney new PNG image.

Note: that the font file has to be a .ttf font file type like Roboto-Regular.ttf from google fonts.

[tbjgolden]

So my problem was actually the same as @Lumbergh-Bot 's - I'm using a lambda function without fonts in the env

But the solution for the original problem is almost certainly to do with not quoting the name of the font he was referring to

 font-family="Brush Script Std"

should be changed to

 font-family="'Brush Script Std'"

(quotes are needed for font names that contain spaces)