jsPDF Tutorial to Add or Encode Custom Google Fonts Faces or Family in PDF Document Using Javascript

 

 

I found this was possible by modifying jsPDF.js to expose the existing addFont method in the public API.

In jsPDF.js, look for:

Add the following:

I put this method near other font methods for clarity – API.setFontAPI.setFontSizeAPI.setFontType, etc.

Now in your code, use:

This works for me with @font-face fonts included with css before loading jsPDF, as well as system fonts. There’s probably a better way to do this using jsPDF’s plugin framework, but this quick and dirty solution should at least get you going.

Note that doc.getFontList() will not show added fonts:

 

 

It seems to be a lot easier with the latest version of jsPDF (1.5.3):

If you look in the folder jsPDF-master > fontconverter, there’s a file fontconverter.html. Open in your browser and use the Browse... button to navigate to, and select your .ttf font file.

Click ‘Create’.

enter image description here

The page will offer a “download” to be saved. This will produce a .js file called [something like] RopaSans-Regular-normal.js. This needs to be included in your page producing the PDF’s. Personally, I’ve done it in the main page’s header (and please note the order of the scripts):

Now in your PDF generation method in js:

Leave a Reply