With Custom fonts Arabic text is breaking

document.autoTable({ head, body, startY: XX, styles: { lineColor: '#c7c7c7', lineWidth: 0, cellPadding: 2}, headStyles: { fillColor: '#ffffff', textColor: '#333333', font: '**Helvetica**' }, bodyStyles: { fillColor: '#f5f5f5', textColor: '#333333', fontSize: 7, lineColor: '#c7c7c7', lineWidth: 0 } });

head am passing as below: const head = [{ content: "طيران الإمارات", styles: { valign: 'centre', cellPadding: {top: 3}, fontSize: 9, fontStyle: 'bold', cellWidth: 110.6 }, }, { content: 'Miles', styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 }, }, { content: 'Tier Miles', styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 }, } ];

with Helvetica Font, Head Text showing as Special characters.

With Custom font Its showing in Arabic but word is breaking I have passed as header this “طيران الإمارات” but in pdf its showing as this طير لإما

** Breaking word

Can you please me help on this

[mmghv]

Here you go :

custom-font.zip

• I first downloaded the font files (example font : Amiri from google fonts)
• Then, using jsPDF font-converter I converted the font file to js file
• then simply imported the font js file after importing both jsPDF and jsPDF-AutoTable

Just one thing, I noticed that some fonts may have small problems with some of the letters (letters compilations or tashkeel) , so you will need to test couple of fonts before deciding on a good font to use.

[mmghv]

Check if it does the same with jsPDF then it’s a font problem, otherwise create a codepen replicating the problem