Font weight not rendering as expected

[camchenry]

Hi, I was trying to render a SVG document which has varied font weights in it. Here is an example script:

const { promises } = require("fs");
const { join } = require("path");
const { Resvg } = require("@resvg/resvg-js");

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <text x="15" y="15" fill="#fff">Normal</text>
  <text x="15" y="30" fill="#fff" font-style="italic">Italic</text>
  <text x="15" y="45" fill="#fff" font-weight="bold">Bold</text>
  <text x="15" y="60" fill="#fff" font-style="italic" font-weight="bold">Bold Italic</text>
</svg>
`;

async function main() {
  const opts = {
    background: "#000",
    fitTo: {
      mode: "width",
      value: 1200,
    },
    font: {
      loadSystemFonts: true, // It will be faster to disable loading system fonts.
    },
  };
  const resvg = new Resvg(svg, opts);
  const pngData = resvg.render();
  const pngBuffer = pngData.asPng();

  console.info("Original SVG Size:", `${resvg.width} x ${resvg.height}`);
  console.info("Output PNG Size  :", `${pngData.width} x ${pngData.height}`);

  await promises.writeFile(join(__dirname, "./text-out.png"), pngBuffer);
}

main();

which I just ran using bun or node example.js.

The output looks like this on my machine:

It resolves to the "Arial" font by default, which I know for certain supports bold font weight. I would expect these to have different font weights.

---

If I render the example SVG using resvg CLI (version 0.37.0), using this command:

resvg example.svg example.png --width 600 --height 600

This is the output I get:

This is what I originally would have expected resvg-js to render before.

[yisibl]

To use the Arial font, you need to add the option: defaultFontFamily: 'Arial'.

resvg-js As of 2.5.0, default_font_family will be empty. This is mainly for Wasm compatibility since system fonts can't be loaded on the Web; fonts can only be loaded on the Web via fontBuffers, and when this option is empty, there are no fonts on the Web.

You can turn on the logLevel: 'debug' option and will see which font is used:

📝 default_font_family = ''
Warning: The default font-family '' not found, set to 'SF Pro'.