JSPDF Custom Font Add not working

Question

CSS Code

@font-face {
    font-family: Calibri;
    src: url("fonts/calibri.ttf");
    font-style: normal;
}

JS Code

doc.setFont('Calibri');
doc.setFontSize(7.5);
doc.setFontType("normal");
doc.text(10, 10, "Hi, How r u");

I want to add Calibri Font, but it is not working

List of js script included

<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script>

CSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 23, 2017, 12:57:52 PM
    Author     : common
*/

@font-face {
    font-family: Calibri;
    src: url("fonts/calibri.ttf");
    font-style: normal;
}

/*
@font-face {
    font-family: Calibri;
    src: url("fonts/calibrii.ttf");
    font-style: italic;
}

@font-face {
    font-family: Calibri;
    src: url("fonts/calibrib.ttf");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: Calibri;
    src: url("fonts/calibriz.ttf");
    font-style: italic;
    font-weight: bold;
}*/

Answer 1

For jsPdf Version 1.4.0 and later there is possibility for using custom font (ttf). Custom font should be base64 encoded. Unfortunately, not all fonts working.

var doc = new jsPDF('landscape');

// to generate 'yourCustomFontTtfBase64Encoded' you can use 
// jsPDF-CustomFonts-support library (on their
// github page there are all instructions for that)
doc.addFileToVFS('yourCustomFont.ttf', 'yourCustomFontTtfBase64Encoded');

doc.addFont('yourCustomFont.ttf', 'yourCustomFont', 'normal');

doc.setFont('yourCustomFont');

jsPDF-CustomFonts-support library for generating 'yourCustomFontTtfBase64Encoded' is here: https://github.com/sphilee/jsPDF-CustomFonts-support

Answer 2

Here's is the solution I'm using. Works well (see below for working codepen)...

First, as others have mentioned - you'll 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, your 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.