jsPDF: custom font styling problem

[AyanAcharya]

hello,
i made a pdf using jspdf with custom font called Nunito Sans.i used doc.html(). But after using this font the css inside this not working properly.but in default font which provide by jspdf the style works perfectly.

issues->

1. the words are overlapping side by side.
   2.tried other custom font like dm-sans the problem was also there.
2. , . / ' ' ; this characters also not move with words.

`

const componentAsHTML = `



 <div  class="bg-white h-full rounded-2xl" >
<p class="font-nunito-sans">  Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, consequuntur accusantium sequi itaque dolores assumenda debitis commodi nostrum. Odio, dolor. Quo aliquid neque vitae veniam omnis odio quae at non?</p></div>`;



doc.html(componentAsHTML, {
  callback: function () {
    doc.save("downloaded-pdf.pdf");
  },
  x: 50,
  y: 20,
});

}`

[ahmedrazabaloch]

please assigned it to me

[VBPMP]

please, assign me this issue

[ahmedrazabaloch]

@AyanAcharya The issue you're encountering is due to the way jsPDF handles custom fonts and CSS. When using custom fonts with jsPDF, you need to explicitly set the font using the doc.setFont() method. This is because jsPDF doesn't automatically apply CSS styles to custom fonts.

To fix the overlapping words issue, you need to set the font size and line height for the custom font. You can do this by adding the following CSS rules to your HTML:

.font-nunito-sans {
font-size: 16px;
line-height: 1.5;
}

The issue you're encountering is due to the way jsPDF handles custom fonts and CSS. When using custom fonts with jsPDF, you need to explicitly set the font using the doc.setFont() method. This is because jsPDF doesn't automatically apply CSS styles to custom fonts.

To fix the overlapping words issue, you need to set the font size and line height for the custom font. You can do this by adding the following CSS rules to your HTML:

CSS
.font-nunito-sans {
font-size: 16px;
line-height: 1.5;
}
Use code with caution. Learn more
This will set the font size to 16px and the line height to 1.5 times the font size, which should prevent the words from overlapping.

To fix the issue with punctuation characters not moving with the words, you need to set the font family for the custom font to include the punctuation characters. You can do this by adding the following CSS rule to your HTML:

CSS
.font-nunito-sans {
font-family: 'Nunito Sans', sans-serif;
}
This will set the font family for the .font-nunito-sans class to Nunito Sans, and if the font doesn't include the punctuation characters, it will fall back to the default sans-serif font.

Here's the updated code with the CSS fixes:
const componentAsHTML = `

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, consequuntur accusantium sequi itaque dolores assumenda debitis commodi nostrum. Odio, dolor. Quo aliquid neque vitae veniam omnis odio quae at non?

`;

doc.html(componentAsHTML, {
callback: function () {
doc.save("downloaded-pdf.pdf");
},
x: 50,
y: 20,
});
.font-nunito-sans {
font-family: 'Nunito Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
}
#3623