Tutorials

jsPDF-Autotable Print Special Characters & Fonts in Table

After the release of version 1.4.0, the jsPDF finally supports encoding diacritics characters, but in a very strange way, in my opinion.

  1. Find the font which contains the characters that you need. Let’s say it will be a Calibri.
  2. Go to C:\Windows\Fonts\Calibri and copy a .ttf font file to Desktop.
  3. Go to jsPDF FontConverter and select copied font file. Click on the Create button.
  4. You should get a JavaScript file with content like this:
import { jsPDF } from "jspdf"
var font = 'AAEAAAAWAQQAAB...==';
var callAddFont = function () {
  this.addFileToVFS('calibri-normal.ttf', font);
  this.addFont('calibri-normal.ttf', 'calibri', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont]);

The second string in this.addFont('calibri-normal.ttf', 'calibri', 'normal'); will be the name of your font. Remember it.

  1. Add a downloaded javascript file to your project and import it: import '../utils/calibri-normal';
  2. Go to a place where you initialize a jsPDF object and set your font up:
<span class="hljs-keyword">const</span> doc = <span class="hljs-keyword">new</span> <span class="hljs-title function_">jsPDF</span>(<span class="hljs-string">'p'</span>, <span class="hljs-string">'pt'</span>, <span class="hljs-string">'a4'</span>);
doc.<span class="hljs-title function_">setFont</span>(<span class="hljs-string">"calibri"</span>);    <span class="hljs-comment">// <-- place here your font name, which you remeber before</span>
<span class="hljs-comment">//...</span>
doc.<span class="hljs-title function_">save</span>(<span class="hljs-string">'file001.pdf'</span>);
  1. If you use jsPDF Autotable add new font to autotable settings too:
doc.<span class="hljs-title function_">autoTable</span>({
    <span class="hljs-attr">head</span>: [[<span class="hljs-string">'Column1'</span>, <span class="hljs-string">'Column2'</span>, <span class="hljs-string">'Column3'</span>]],
    <span class="hljs-attr">body</span>: someDataRows,
    <span class="hljs-attr">styles</span>: {
      <span class="hljs-attr">font</span>: <span class="hljs-string">'calibri'</span>,    <span class="hljs-comment">// <-- place name of your font here</span>
      <span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
    },
    <span class="hljs-attr">margin</span>: { <span class="hljs-attr">bottom</span>: <span class="hljs-number">60</span> }
});
Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.

Recent Posts

MiniMax-M1 vs GPT-4o vs Claude 3 Opus vs LLaMA 3 Benchmarks

MiniMax-M1 is a new open-weight large language model (456 B parameters, ~46 B active) built with hybrid…

June 22, 2025

How to Use Husky with npm to Manage Git Hooks

Managing Git hooks manually can quickly become tedious and error-prone—especially in fast-moving JavaScript or Node.js…

June 22, 2025

How to Use Lefthook with npm to Manage Git Hooks

Git hooks help teams enforce code quality by automating checks at key stages like commits…

June 22, 2025

Lefthook vs Husky: Which Git Hooks Tool is Better? [2025]

Choosing the right Git hooks manager directly impacts code quality, developer experience, and CI/CD performance.…

June 22, 2025

Llama 3.1 vs GPT-4 Benchmarks

We evaluated the performance of Llama 3.1 vs GPT-4 models on over 150 benchmark datasets…

July 24, 2024

Transforming Manufacturing with Industrial IoT Solutions and Machine Learning

The manufacturing industry is undergoing a significant transformation with the advent of Industrial IoT Solutions.…

July 6, 2024