Custom Fonts client side

pdfMake uses the Roboto font by default. This guide explains how to use your own fonts with pdfMake (in client-side code).

TL;DR

pdfMake uses a 2nd file: vfs_fonts.js for fonts (and other files) you wish to embed into your generated PDFs.

When you run

gulp buildFonts

(from the pdfMake directory) a new build/vfs_fonts.js file is created containing an embedded copy of all files from the local examples/fonts subdirectory (in a key/value object pdfMake.vfs).

Detailed Instructions

To use custom fonts, 3 steps are required:

1. create a new vfs_fonts.js file containing your font files
2. assign pdfMake.fonts in your javascript
3. specify the font in your doc-definition

1. create a new vfs_fonts.js containing your font files

• Create the examples/fonts subdirectory in your pdfMake code directory, if it doesn't already exist.

• Copy your fonts (and other files you wish to embed) into the examples/fonts subdirectory.

• Run npm install (from the pdfMake directory) to ensure all prerequisites modules are installed.

• Run gulp buildFonts to create a new build/vfs_fonts.js (you can update gulpfile.js to change the base directory path or to add an alternative config for the buildFonts task).

• Include your new build/vfs_fonts.js file in your code (in the same way you include pdfmake.js or pdfmake.min.js).

The above buildFonts action embeds all files from examples/fonts (into a local key/value variable pdfMake.vfs) - not only fonts. Which means you could put images in there, run gulp buildFonts, and reference them by filename in your doc-definition object.

You don't need to reference the files in examples/fonts anymore because all files have been copied to the vfs_fonts.js.

2. assign pdfMake.fonts in your javascript

In your code, before calling pdfMake.createPdf(docDefinition) set pdfMake.fonts as in the example below (notice we don't specify paths, just filenames):

pdfMake.fonts = {
   yourFontName: {
     normal: 'fontFile.ttf',
     bold: 'fontFile2.ttf',
     italics: 'fontFile3.ttf',
     bolditalics: 'fontFile4.ttf'
   },
   anotherFontName: {
     (...)
   },

   // example of usage fonts in collection
   PingFangSC: {
     normal: ['pingfang.ttc', 'PingFangSC-Regular'],
     bold: ['pingfang.ttc', 'PingFangSC-Semibold'],
   }
}

The keys defined here will be used as font names in your doc-definition styles.

Each font-family defines 4 properties: normal, bold, italics and bolditalics referring to appropriate files (the ones you embedded from examples/fonts/). You should define all 4 components (even if they all point to the same font file).

By default pdfMake uses the following font structure:

pdfMake.fonts = {
        Roboto: {
                normal: 'Roboto-Regular.ttf',
                bold: 'Roboto-Medium.ttf',
                italics: 'Roboto-Italic.ttf',
                bolditalics: 'Roboto-MediumItalic.ttf'
        }
};

3. specify the font in your doc-definition

pdfMake uses 'Roboto' as default font, so in order to use your font, you should specify it in your doc-definition object.

The easiest way is to set it globally in the defaultStyle

var docDefinition = {
  content: (...),
  defaultStyle: {
    font: 'yourFontName'
  }
}

compile font-file via shell script

If you want to compile a font via shell-script you can also look here: Building-Fonts-via-bash-script

---

I know this it is overly complicated at the moment, and your font files have to be copied locally to the pdfMake source.

I'm going to change it in 0.2.0

---

Source: Use custom font