jsPDF - fromHTML and custom fonts

Question

I am using the jsPDF library with the fromHtml plugin to generate a pdf document from HTML content and it works well.

Now I am also trying to add a custom font with this plugin: https://github.com/sphilee/jsPDF-CustomFonts-support

However, the two plugins don't seem to interact well with each other, when I generate the pdf it switches to a standard font.

When I use the custom font plugin alone, it works.

This is my code:

    var pdf = new jsPDF('p', 'pt', 'letter');
    pdf.addFileToVFS('CustomFont.tff', 'base64 of .tff file');
    pdf.addFont('CustomFont.tff', 'CustomFont', 'normal');
    pdf.setFont('CustomFont');
    var source = $('#pdf')[0];
    var margins = {
        top: 50,
        bottom: 60,
        left: 40,
        width: 520
    };
    pdf.fromHTML(
        source,
        margins.left,
        margins.top, {
            'width': margins.width, 
            'elementHandlers': specialElementHandlers
        },
        function (dispose) {
            pdf.save('Test.pdf');
        }, margins);

Answer 1

I also faced that issue today. Turns out jsPDF has built-in support for custom fonts. So you don't need to include jspdf.customfonts.js anymore.

You still can use jspdf-customfonts to generate default_vfs.js file:

(function (jsPDFAPI) { 
"use strict";
jsPDFAPI.addFileToVFS('somefont.ttf','AAEAAA...');
})(jsPDF.API);

Then in your code you could use that font using the following code:

pdf.addFont('somefont.ttf', 'somefont', 'normal');
pdf.setFont('somefont');

Instruction on how to generate default_vfs.js:

1. Run npm install inside of the node_modules\jspdf-customfonts directory
2. Copy your fonts into the fonts subdirectory.
3. Run node makeFonts.js to create default_vfs.js.