I've got a project where I convert some <svg> to pdf using jsPDF and the svg2pdf plugin. Now I got custom fonts working. Here is a codesandbox with my problem: Reproduction Codesandbox.

Basically, I used the fontconverter to convert the .ttf files to base64 and exported the callAddFont function:

var callAddFont = function () {
  this.addFileToVFS("SourceSansPro-Regular-normal.ttf", SourceSansProRegular);
  this.addFileToVFS("SourceSansPro-Italic-normal.ttf", SourceSansProItalic);
  this.addFileToVFS("SourceSansPro-Bold-bold.ttf", SourceSansProBold);

  this.addFont("SourceSansPro-Regular-normal.ttf", "SourceSansPro", "normal");
  this.addFont("SourceSansPro-Italic-normal.ttf", "SourceSansPro", "italic");
  this.addFont("SourceSansPro-Bold-bold.ttf", "SourceSansPro", "bold");
};

export { callAddFont };

I then created some svg with different font-styles:

const svg = `
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 595.28 841.89"
    >
      <text style="font-family: SourceSansPro; font-size: 11.5px;" x="10" y="20" fill="black">I am regular text</text>
      <text style="font-family: SourceSansPro; font-style: italic; font-size: 11.5px;" x="10" y="50" fill="black">I am italic text</text>
      <text style="font-family: SourceSansPro; font-style: bold; font-size: 11.5px;" x="10" y="90" fill="black">I am supposed to be BOLD & beautiful</text>
    </svg>
  `;

When calling the doc.svg() method, for some reason, the normal and italic font styles are working just fine. Bold is not working though.

I can call doc.setFont("SourceSansPro", "bold");, but then regular text gets bolded too, so that is not what I want. I want to get it to work with the inline CSS styles.

I don't understand why italics is working just fine, but bold isn't.

Any help is appreciated.