Devlin Peck
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:
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!
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:
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.
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.
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.
