Search code examples
jspdf

Custom font faces in jsPDF?

Is it possible to include custom fonts in jsPDF ?

With the basic library, if I console log 'doc.getFontList()' I get:

Courier, Helvetica, Times, courier, helvetica, times

But, say I want to use 'Comic Sans' ( not that I would ;o) ) can it be done ?

Even better, could I use a font is locally stored and has been declared in the site with @font-face ?

Solution

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

    In jsPDF.js, look for:

    //---------------------------------------
// Public API

    Add the following:

        API.addFont = function(postScriptName, fontName, fontStyle) {
      addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
    };

    I put this method near other font methods for clarity - API.setFont, API.setFontSize, API.setFontType, etc.

    Now in your code, use:

    doc.addFont('ComicSansMS', 'Comic Sans', 'normal');
doc.setFont('Comic Sans');
doc.text(50,50,'Hello World');

    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:

    // TODO: iterate over fonts array or return copy of fontmap instead in case more are ever added.