How to use bold custom font in jspdf

Question

I'm trying to use a custom font with jspdf but i can't get to show the font as bold, I followed the steps specified here.

here is the code:

require ("./js/Roboto-Regular-normal.js");
require ("./js/Roboto-Regular-bold.js");
let doc = new jsPDF();
   
doc.setFont('Roboto-Regular');
doc.setFontSize(8);
doc.text("hello world", 50 , 50);
doc.setFontType('bold');
doc.text("Hello Bold", 50, 55);

let blob = doc.output();
const fs = require('fs');
fs.writeFile('a5.pdf', blob, 'utf8', function(err){
    //Do something
});

Roboto-Regular-normal.js

(function (jsPDFAPI) {
    var font = base64_font; //I didn't include this string because is too large, let me know if I should include it anyways
    
    var callAddFont = function () {
        this.addFileToVFS("Roboto-Regular-normal.ttf", font);
        this.addFont("Roboto-Regular-normal.ttf", "Roboto-Regular", "normal");
    };
    jsPDFAPI.events.push(['addFonts', callAddFont])
})(jsPDF.API);

Roboto-Regular-bold.js:

(function (jsPDFAPI) {
        var font = base64_font; //I didn't include this string because is too large, let me know if I should include it anyways
        
        var callAddFont = function () {
            this.addFileToVFS("Roboto-Regular-bold.ttf", font);
            this.addFont("Roboto-Regular-bold.ttf", "Roboto-Regular", "bold");
        };
        jsPDFAPI.events.push(['addFonts', callAddFont])
})(jsPDF.API)

Nothing in the pdf appears as bold.

I'm using it in electron, I don't know if that changes anything.

Sudesh Ladhusinghe Sudesh Ladhusinghe · Accepted Answer · 2021-06-11T11:01:13

You can edit your JS file like this,

doc.text("This is example paragraph", 11,13,).setFontSize(8).setFont(undefined, 'bold');

doc.text("This is example paragraph", 11,13,).setFontSize(8).setFont(undefined, 'normal');

Output here, Result output

How to use bold custom font in jspdf

3 Answers