Fonts not applied in generated PDF using jsPDF from HTML content

Question

I am trying to convert my HTML content to a PDF using the jsPDF library. The HTML file contains custom fonts that are defined using @font-face with Base64-encoded font URLs. However, when I generate the PDF, the fonts are not applied, and the PDF appears to use a default fallback font.

Here is an example of my code: index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Custom Font PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
      @font-face {
        font-family: 'LSTCNP+Noto Serif Bold';
        src: url('data:font/woff2;charset=utf-8;base64,d09xxaxadfdfdfdfGMg...cAAA==')
          format('woff2');
      }

      @font-face {
        font-family: 'GLQUUO+Noto Serif';
        src: url('data:application/octet-stream;base64,AAEAAAANAIAAAwBQ..AA=') format('truetype');
      }

      .custom-font-bold {
        font-family: 'LSTCNP+Noto Serif Bold';
        font-size: 20px;
        color: #333333;
      }

      .custom-font-regular {
        font-family: 'GLQUUO+Noto Serif';
        font-size: 16px;
        color: #555555;
      }
    </style>
  </head>
  <body>
    <button onclick="convertToPDF()">Generate PDF</button>
    <div id="contentToPrint">
      <p class="custom-font-bold">This is using the Bold Custom Font</p>
      <p class="custom-font-regular">This is using the Regular Custom Font</p>
    </div>

    <script>
      const { jsPDF } = window.jspdf;

      function convertToPDF() {
        const doc = new jsPDF();

        const elementHTML = document.querySelector("#contentToPrint");

        doc.html(elementHTML, {
          callback: function (doc) {
            doc.save("custom-font.pdf");
          },
          margin: [10, 10, 10, 10],
          html2canvas: {
            scale: 0.8, // Adjust scaling factor if needed
          },
          x: 10,
          y: 10,
        });
      }
    </script>
  </body>
</html>

Problem:

The fonts render correctly when I open the HTML in a browser.

What I have tried:

Used both .woff2 and .ttf fonts in the @font-face rule.

Verified the Base64 encoding of the fonts.

Tried adjusting html2canvas settings (scale, windowWidth). However, when I generate the PDF using jsPDF, the custom fonts are not applied, and it falls back to the default system font.

here is my stackblitz link

How can I make jsPDF pick up the custom fonts defined in the HTML? Is there something I am missing?

Thank you in advance!

herrstrietzel · Accepted Answer · 2024-12-17 23:56:40Z

3

Afaik JSPDF doesn't support custom font loading from the CSS.

You can manually load/register fonts via addFont() method:

doc.addFont('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFCjwM0Lhq_Szw.ttf', 'Noto Serif', 'normal');  
doc.addFont('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZT1ejwM0Lhq_Szw.ttf', 'Noto Serif', 'bold');

const {
  jsPDF
} = window.jspdf;

function convertToPDF() {
  const doc = new jsPDF();

  /**
   * register fonts
   */
  doc.addFont('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFCjwM0Lhq_Szw.ttf', 'Noto Serif', 'normal');
  doc.addFont('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZT1ejwM0Lhq_Szw.ttf', 'Noto Serif', 'bold');

  const elementHTML = document.querySelector("#contentToPrint");

  doc.html(elementHTML, {
    callback: function(doc) {
      doc.save("custom-font.pdf");
    },
    margin: [10, 10, 10, 10],
    html2canvas: {
      scale: 0.8, // Adjust scaling factor if needed
    },
    x: 10,
    y: 10,
  });
}

@font-face {
  font-family: 'Noto Serif';
  src: url('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFCjwM0Lhq_Szw.ttf') format('truetype');
  font-weight: 400
}


@font-face {
  font-family: 'Noto Serif';
  src: url('https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZT1ejwM0Lhq_Szw.ttf') format('truetype');
  font-weight: 700
}



.custom-font-regular {
  font-family: 'Noto Serif';
  font-size: 16px;
  color: #555555;
}

.custom-font-bold {
  font-family: 'Noto Serif';
  font-size: 20px;
  color: #333333;
  font-weight: 700
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<button onclick="convertToPDF()">Generate PDF</button>
<div id="contentToPrint">
  <p class="custom-font-bold">This is using the Bold Custom Font</p>
  <p class="custom-font-regular">This is using the Regular Custom Font</p>
</div>

Download doesn't load in snippets. See also codepen.

Keep in mind no HTML-to-PDF library can really convert an HTML layout to PDF.
In fact, all libraries (including server-side ones as DOMPdf, mPDF, TCPDF etc.) have a lot work to do trying to rebuild the original HTML/CSS based layout to a suitable native PDF output. Some of these have smarter concepts to decompose web layouts or more convenient web-font loaders (CSS-interpretation or maybe even converters for woff2/woff files for native font subsetting). So it's really tricky and you should definitely check available libraries to find the best option for your needs.

edited Dec 17, 2024 at 23:56

answered Dec 17, 2024 at 20:06

herrstrietzel

19.5k2 gold badges32 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Krunal Lathia Dec 18, 2024 at 7:24

thank you for your answer, i have question like If i use gstatic url to load font's, i think my app will not work in offline mode right ? (i want app to work in offline as well)

herrstrietzel Dec 18, 2024 at 17:18

You can download the fonts and use a local/relative path - it doesn't matter where the fonts are hosted (at least not for the HTML preview or jspdf itself). But you need a truetype font. If you're using google fonts you can get these in the GUI by clicking the download button

bendodge Dec 23, 2024 at 23:01

Terrific answer! For those wondering how to get the .ttf fonts: use cURL to GET the URL supplied by Google, such as fonts.googleapis.com/css2?family=Noto+Sans+JP. It should return a ttf URI.

K J · Accepted Answer · 2024-12-18 01:15:14Z

Apart from jsPDF has NO use for CSS (That is for HTML not PDF).

In addition jsPDF uses Helvetica and Roman as seen here in your output. I had to enlarge the first 2 lines of Helvetica text by a HEIGHT scale factor of 10 but not the last Roman 1.

HTML2PDF/Canvas2PDF will often have conflicts using mixed units so the inter-char is far too big from transformations whilst the font height is too small under 1 point in height.

Why may it be letters of about 0.75 points ? That is simple.

PDF uses height as printers points for measure x 1 x 2 etc and although an em is notionally one letters width it does not work that way to define inter-char spacing or font height, in a unitless PDF.

Whilst in a Canvas px, is the dominant unit. In PDF pt is the dominant unit. This also causes problems when mixed as ppp (pixels per point) is 1.333 or ppp (points per pixel) is 0.75 which seems to be the attained height of those letters (under one point high).

Also add to the above that jsPDF has a preference for metric mm rather than imperial pt and you have the perfect combination for mis-scaling.

Since [X]HT[ML] is a flowable extended HyperText style marking language and in comparison PDF has to be a FIXED binary printout from a plain text unstyled non-flowable format, (Yes a PDF can be pure plain ANSI text but generally does not not use reflow nor styled internal definitions). There are no italics or bold in ANSI plain text. Then by far the easiest is "Save as Print" from HTML to PDF and Chrome-headless-shell is perfect for that job, as it can (optionally -disable) add first level accessibility tagging.

Thank you for your comment, does it mean conversion using html to pdf is not 100% accurate ?

Collectives™ on Stack Overflow

Fonts not applied in generated PDF using jsPDF from HTML content

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related