custom font for svg text,tspan

I wrote following code to support cyrillic and chinese characters when using doc.text

    const robotoRegularBase64 = await import('./roboto.ttf'); // with webpack url-loader
    const robotoRegular = b64arraybuffer.decode(
      robotoRegularBase64.split('data:font/ttf;base64,')[1]
    ); // turn base64 into arraybuffer

    doc.registerFont('Roboto-Regular', robotoRegular); // pass roboto regular as arraybuffer
    doc.font('Roboto-Regular'); // use the font

This works quite fine when using doc.text, but I would also like the svg elements to use that font, what is the recommended way of doing this? Maybe incuding css/style? <text> and <tspan> elements don’t seem to use the doc.font defined font family by default.

[alafr]

If you want to use the same font for the whole svg it’s quite simple: SVGtoPDF(doc, svg, x, y, { fontCallback: () => 'Roboto-Regular' });

[akaleeroy]

To support several fonts

To convert your.svg first put all the fonts you’re going to need in a path like ./fonts

function listFonts(dir = 'fonts/') {
  return Array.from(fs.readdirSync(dir).filter(file => /\.ttf$/.test(file)));
}
const availableFonts = listFonts();

const doc = new PDFDocument();
const svg = fs.readFileSync('your.svg', 'utf-8');

SVGtoPDF(doc, svg, 0, 0, {
  fontCallback: (family, bold, italic, fontOptions) => {
    // => ex 'Montserrat Light', false, false, { fauxItalic: false, fauxBold: false }
    // Normalize font-family string
    let face = family.replace(/["']/g, '').replace(/-/g, ' ');
    if (bold && italic) face = `${face} Bold Italic`;
    if (bold) face = `${face} Bold`;
    if (italic) face = `${face} Italic`;
    let match = availableFonts.find(fontObj => {
      let re = new RegExp(`${face}( Regular)?$`);
      return re.test(fontObj.fullName);
    });
    if (match !== undefined) {
      doc.registerFont(face, match.filePath);
      return face;
    } else {
      return 'Helvetica';
    }
  },
});