Custom Font-Family for Highcharts Labels Not Applied When Printing with html2pdf in Angular

I am using Highcharts in my Angular application and I have successfully changed the font-family of the axis labels using the following CSS code:

.highcharts-yaxis-labels, .highcharts-xaxis-labels, .highcharts-root, .mat-form-field { font-family: "YekanBakh" !important; }
​

This works perfectly when displaying the chart in the browser. However, when I try to generate a PDF using the html2pdf library, the custom font family is not applied in the generated PDF.

Here is the code I am using to generate the PDF:

public onPrint(): void {
const content = document.getElementById('print-layout');
const options = {
margin: [5, 2, 5, 2],
filename: 'document.pdf',
pagebreak: {
mode: ['avoid-all', 'css'],
before: "#nextpage"
},
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: {
unit: 'mm',
orientation: 'p',
format: 'a4',
putOnlyUsedFonts: true,
compress: true,
floatPrecision: 'smart'
},
};

html2pdf()
.from(content)
.set(options)
.save();
}​

When the chart is printed to a PDF, the YekanBakh font for the Highcharts labels is not applied. Instead, it defaults to some other font, despite the CSS being applied correctly in the browser.

My Question: How can I make sure that the custom font ("YekanBakh") is applied to the axis labels in the PDF generated by html2pdf?

Verified that the font is properly applied in the browser.
Added !important to the CSS rule to ensure it's being applied.
Ensured that Highcharts rendering works well on the screen, but the issue persists in the PDF output.

Continue reading...