jsPDF: Custom font does not get rendered properly in the PDF
I am currently using jsPDF to convert some html information containing multiple language texts (Hindi, Tamil, English ,etc. ) to pdf. I use the Sakal Bharati font (For Indian languages) , which contains all these languages script in one TTF file and convert it to base64 string to utilise it via custom font method.
Sample code given below:
var doc = new jsPDF();
var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
var font = "AAEAAAA................AAA=";
doc.addFileToVFS('SakalBharati_N_Ship-normal.ttf', font);
doc.addFont('SakalBharati_N_Ship-normal.ttf', 'SakalBharati_N_Ship', 'normal');
doc.setFont('SakalBharati_N_Ship');
doc.text("घर में रहिए सुरक्षित रहिए।", pageWidth / 2, 65);
doc.save("Trial.pdf");
The texts are rendered in the pdf, but not properly . For example in the first image is how the hindi text should look like.The second image represents how its rendered in the generated pdf .
How it should look
Generated content
As it can be seen these 2 are very different from each other . If I convert this to a word/xml file using any online tool , the text gets rendered properly/correctly. But my query is how to make it happen for the pdf file that is generated ?
Will appreciate a fast response.
About this issue
- Original URL
- State: open
- Created 4 years ago
- Comments: 23 (3 by maintainers)
I am using jsPDF version 2.5.1 and I too am facing the same issue when using devanagari font. Has it been fixed yet?