How to Use Custom Fonts with jsPDF

How to use custom fonts with jsPDF tutorial cover photo

The standard jsPDF 1.5.3 implementation only supports the 14 standard PDF fonts. If you want to include custom fonts to match your brand or style guide, then you're going to need to take a few extra steps. 

The 14 standard PDF fonts are as follows:

  • Courier
  • Courier-Bold
  • Courier-BoldOblique
  • Courier-Oblique
  • Helvetica
  • Helvetica-Bold
  • Helvetica-BoldOblique
  • Helvetica-Oblique
  • Symbol
  • Times-Roman
  • Times-Bold
  • Time-Italic
  • Time-BoldItalic

If you want use one of the above fonts, then you can set it using the setFont() method without taking any additional actions. Otherwise, follow the steps in this tutorial.

Let's get started!

Adding Custom Fonts to jsPDF

To use a custom font in your PDF file, you need a .ttf version of your desired font file.

Most fonts that you purchase or download will have this format available. For example, when you download a Google Font, you’ll get the .ttf file for each font that you downloaded. This is the output when you download Lato from Google Fonts:

Lato font ttf files downloaded in folder screenshot

Once you have your .ttf files in hand, you need to upload each font that you want to use (one at a time) to this jsPDF Font Converter. You DO NOT need to enter the name, fontStyle, or Module format. This will fill in automatically when you select your .ttf font file.

Press the "Choose Files" button and select your .ttf font file.

Select "Choose Files" in jsPDF font converter screenshot

After selecting your .ttf file, take note of the text that appears in the fontName and fontStyle text boxes before pressing the Create button. This text is what you’ll use with the setFont() method, like so:

{% c-block language="js" %}
doc.setFont('Lato-Regular', 'normal');
{% c-block-end %}

After you’ve taken note of the fontName and fontStyle text, select the blue “Create” button and save the JavaScript file somewhere safe. You will need to include it in your project's output folder and link to it accordingly.

Take note of fontName and fontStyle jsPDF font converter screenshot

If you're using multiple custom fonts in your PDF, then you'll need to go through this process with each of them.

Return to Generate PDF Certificate from an eLearning Course tutorial.

Featured Tutorials

View all tutorials