question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom font not working

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:23 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
galcottcommented, Dec 29, 2018

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');

} `

4reactions
Uzlopakcommented, May 8, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using custom @font-face in CSS is not working in any browser
It turns out that I was using the "Files\Fonts\" as the path of the font, although ...
Read more >
css - Custom font not loading - Webmasters Stack Exchange
Ok here is how it should work. The CSS @font-face { font-family: "BellGothicStd"; src: url("fonts/BellGothicStd-Black.otf") ...
Read more >
Custom Fonts Not Displaying On Front End - Elementor
If invalid custom CSS or other code has been added to the site, this can cause many different display problems, including the inability...
Read more >
How To Load and Use Custom Fonts with CSS | DigitalOcean
You can use the @font-face rule to load a custom font on a web page. The history of loading custom fonts has lead...
Read more >
Custom font is not working. - WordPress.org
Hi :] I am trying to put a custom font in my localhost site child theme. So Iv'e created the 'fonts' folder within...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found