Add Custom font in jspdf

Question

i want to use custom font such as 'Comic Sans MS' or 'Calibri' font in jsPDF. i have found similar question here, but mine is not working. i already added the latest jspdf. and my code is like below :

        var doc = new jsPDF('p','mm','a4');

        doc.addFont('ComicSansMS', 'Comic Sans', 'normal','StandardEncoding');
        doc.setFont('Comic Sans');          
        doc.text(10, 10, "Lorem ipsum dolor sit amet!");
        doc.output('dataurl');

but the pdf result's font is still the default font ( not comic sans ). and there is no error. Please help...

Answer 1

I found this github link

1: https://github.com/MrRio/jsPDF/blob/master/examples/js/basic.js#L390 and function name demoUsingTTFFont() useful for me.and to convert into base64 encoder link

Answer 2

i have found the solution,

don't use the jspdf.js, but use the debug.jspdf.js

and after that add this code in the debug.jspdf.js

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

Answer 3

Since the other answers here are a little out of date, here is the solution I'm using...

First, as others have mentioned - you need these two libraries:

1. jsPDF: https://github.com/MrRio/jsPDF
2. jsPDF-CustomFonts-support: https://github.com/sphilee/jsPDF-CustomFonts-support

Next - the second library requires that you provide it with at least one custom font in a file named default_vfs.js. I'm using two custom fonts - Arimo-Regular.ttf and Arimo-Bold.ttf - both from Google Fonts. So, my default_vfs.js file looks like this:

(

(function (jsPDFAPI) { 
    "use strict";
    jsPDFAPI.addFileToVFS('Arimo-Regular.ttf','[Base64-encoded string of your font]');
    jsPDFAPI.addFileToVFS('Arimo-Bold.ttf','[Base64-encoded string of your font]');
})(jsPDF.API);

Obviously, you version would look different, depending on the font(s) you're using.

There's a bunch of ways to get the Base64-encoded string for your font, but I used this: https://www.giftofspeed.com/base64-encoder/.

It lets you upload a font .ttf file, and it'll give you the Base64 string that you can paste into default_vfs.js.

You can see what the actual file looks like, with my fonts, here: https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js

So, once your fonts are stored in that file, your HTML should look like this:

    <script src="js/jspdf.min.js"></script>
    <script src="js/jspdf.customfonts.min.js"></script>
    <script src="js/default_vfs.js"></script>

Finally, your JavaScript code looks something like this:

const doc = new jsPDF({
      unit: 'pt',
      orientation: 'p',
      lineHeight: 1.2
    });

doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");

doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);

doc.text("Hello, World!", 100, 100);

doc.setFontType("bold");

doc.text("Hello, BOLD World!", 100, 150);

doc.save("customFonts.pdf");

This is probably obvious to most, but in that addFont() method, the three parameters are:

1. The font's name you used in the addFileToVFS() function in the default_vfs.js file
2. The font's name you use in the setFont() function in your JavaScript
3. The font's style you use in the setFontType() function in your JavaScript

You can see this working here: https://codepen.io/stuehler/pen/pZMdKo

Hope this works as well for you as it did for me.