Jspdf: Custom font not working

[galcott]

I am using the latest version of jsPDF, and trying to use a custom font from Google but it does not work.
I import the font here (the one I'm trying to use is Inconsolata).
<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro|Inconsolata" rel="stylesheet">

I try to add it with this code and it does show up in the output from getFontList, but the PDF doesn't use that font.
doc.addFont('Inconsolata','Inconsolata','regular'); console.log(doc.getFontList()); doc.setFont('Inconsolata');

In addition, I get the following error message on the console (which does not appear if I go back to an old version of jsPDF):
jspdf.min.js:102 Uncaught TypeError: Cannot set property 'adler32cs' of undefined at t (jspdf.min.js:102) at jspdf.min.js:102 at jspdf.min.js:1 at jspdf.min.js:1 t @ jspdf.min.js:102 (anonymous) @ jspdf.min.js:102 (anonymous) @ jspdf.min.js:1 (anonymous) @ jspdf.min.js:1

[Uzlopak]

Webfonts are not supported.

[galcott]

Then what fonts are supported by addFont?

[Uzlopak]

Currently none. But with 1.4.0 we will have ttf support. But they have to be base64 encoded etc..

[galcott]

When will that be available?

[galcott]

I see that 1.4.0 is released but there doesn't seem to be any documentation on how to use the custom fonts. Can you give a complete example?

[Uzlopak]

sure, check examples/basic.html, last tab.

[galcott]

I can't get this to work with the font I want to use, which is Inconsolata from Google Fonts. I encoded it using this site: https://www.giftofspeed.com/base64-encoder/.

I modified the demoUsingTTFFont function to use that font, shown below.

Attached is the PDF that I got. I tried a couple of other fonts and got an empty PDF. So what is the problem here?
test.pdf

`
function demoUsingTTFFont() {
var Inconsolata="Removed by Aras"
var doc = new jsPDF();

doc.addFileToVFS("Inconsolata.ttf", Inconsolata);

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

doc.setFont('Inconsolata'); // set font

doc.setFontSize(10);
doc.text("This is a test of custom font Inconsolata", 10, 10);

doc.save('test.pdf');

}
`

[AgoloMohamedElHamamsy]

Don't use the site converter use the /fontconver/fontconverter.html As mentioned in the docs:

To add the font to jsPDF use our fontconverter in /fontconver/fontconverter.html . The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF. You just have to add this generated js-File to your project. You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.

[caspervanpomeren]

Don't use the site converter use the /fontconver/fontconverter.html As mentioned in the docs:

To add the font to jsPDF use our fontconverter in /fontconver/fontconverter.html . The fontconverter will create a js-file with the content of the provided ttf-file as base64 encoded string and additional code for jsPDF. You just have to add this generated js-File to your project. You are then ready to go to use setFont-method in your code and write your UTF-8 encoded text.

Which docs are you reading? Because I can't find this quote anywhere.

[Uzlopak]

https://github.com/MrRio/jsPDF/blob/master/README.md#use-of-utf-8--ttf

[caspervanpomeren]

That was fast, thanks! Can't believe I missed that (also a bit strange that google can't find that text).

[Uzlopak]

I wrote it few days ago and I rephrased a little right now.

[caspervanpomeren]

That explains it. Do you know if there is any way I can contribute to the docs (more examples / updating etc?). I am not quite ready to help with coding, but I do think I can add to the docs even though I am quite new to all of this.

[damianed]

I am having a problem with the setFont method, I generate the js file with /fontconver/fontconverter.html and import it, but when I try to set the font and the write something in the pdf-file, nothing appears.

[AgoloMohamedElHamamsy]

Which version are you using?

[damianed]

1.5.3 installed with npm

[damianed]

Never mind, apparently jspdf is creating the pdf correctly, I am trying to display it on electron and its not showing the font.

[WillHubbell]

Damianed, did you ever find a solution for your problem? I'm running into the same thing. I used the fontconverter, imported the converted font (it even shows up in .getFontList()), used doc.setFont(), but the font isn't changing. In fact, ANY font I try to change it to doesn't work in the PDF, even the default ones

[galcott]

I don't know if this will help but my font didn't show up until I set the style to 'normal', like this.

`

    var doc = new jsPDF('p', 'in', 'letter');

    doc.setProperties({title: 'Prescription Label'});

    doc.addFont('luximr-normal.ttf', 'luximr', 'normal');

    doc.setFont('luximr');

    doc.setFontStyle('normal');

`

[Uzlopak]

doc.setFont('luximr', 'normal') is probably better. I will probably set setFontStyle as deprecated.

[MustaphaELALAMI00]

in jspdf 1.5.3

           var x="(ttf)base64"
           doc.addFileToVFS("asvcodar.ttf", x);
            doc.addFont('asvcodar.ttf', 'asvcodar light', 'normal', 'Identity-H');
            doc.setFont('asvcodar light');

this exemple for add font arabic, it doesn t not work for me ! help

[moneyeyedan]

hii jspdf code here
let pdfbasefont1;
await this.pdfImages("Italiana-Regular.ttf",(base64Data)=>{
pdfbasefont1 =base64Data;
});
doc.addFileToVFS("MarkaziText-Regular", pdfbasefont1);
doc.addFont('MarkaziText-Regular', 'markazi-text', 'normal');
doc.setFont('markazi-text');
this is work on the local machine but i host the aws server custom font not working,please any one resolve this problem

[samuraitruong]

@moneyeyedan If it works on local you can but not work on was, have you check if you upload the font file to host machine, also the file path maybe not correct , make sure you use path.resolve to absolute path