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 Ideal

Generated content Actual

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)

Most upvoted comments

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?