Font issues when rendering SVG to PNG

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 😃

[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)