Fonts not applied in generated PDF using jsPDF from HTML content

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!

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.

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.

Filed under: Kiến thức lập trình - @ 00:47

Thẻ: htmlcsspdffontsjspdf

Thiết kế website giá rẻ

Danh mục

Fonts not applied in generated PDF using jsPDF from HTML content