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

Hi you can try and modify fonts like this,

API.addFont = function(fontScript, font, style) {
      addFont(fontScript, font, style, 'StandardEncoding');
    };

above function you will have to add to lib/before your font change invocation, but i would suggest add script tag just after you load jspdf, and add this function in that script tag.

Now you need to add font css,

and then you can modify font of the pdf like this.

doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal');
doc.setFont('Calibri');
doc.text(50,50,'Now this is Calibri');

Answer 3

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.

Answer 4

You can't at the moment.

If you take a look to the source code, you see there is a switch that, if it doesn't know the font, returns times as font

switch (fontName) {
      case 'sans-serif':
      case 'verdana':
      case 'arial':
      case 'helvetica':
        fontName = 'helvetica';
        break;
      case 'fixed':
      case 'monospace':
      case 'terminal':
      case 'courier':
        fontName = 'courier';
        break;
      case 'serif':
      case 'cursive':
      case 'fantasy':
      default:
        fontName = 'times';
        break;
    }

You can either use one of that fonts, or edit the library to support your font.

Otherwise, there is a work in progress library that add support to custom fonts: https://github.com/sphilee/jsPDF-CustomFonts-support

After adding all the needed files, you should use it like this:

doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal');

Answer 5

Like stated above you can use the jsPDF-CustomFonts-support library at https://github.com/sphilee/jsPDF-CustomFonts-support.

There are instructions on the READ.ME file, but what got me going were these instructions https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041:

1. Upload your .ttf font to Font Squirell https://www.fontsquirrel.com/tools/webfont-generator
2. Press download and you will get a compressed file with a new .ttf file. Now you have to encode to base64 https://www.giftofspeed.com/base64-encoder/.
3. Once you have the base64 code of your font you have to go to the vfs_fonts.js file that you have download with the jsPDF-CustomFonts-support https://github.com/sphilee/jsPDF-CustomFonts-support and after one of the ',' used to separate the different fonts in that file you have to add: "YOUR_FONT_NAME.ttf":"YOUR BASE64 CODE", (remember to finish with a comma at the end, after the quotes).
4. Once you do that you can add the function doc. addFont("YOUR_FONT_NAME.ttf","YOUR_FONT_NAME.ttf","normal","WinAnsiEncoding").