via Virtual file system (VFS)

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 command node build-vfs.js "./examples/fonts" in the pdfmake package directory a new build/vfs_fonts.js file is created containing an embedded copy of all files from the local examples/fonts subdirectory.

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.addFonts(...) in your javascript
  3. specify the font in your doc-definition

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

The above steps 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 node build-vfs.js "./examples/fonts, 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.

Other ways:

2. assign pdfMake.addFonts(...) in your javascript

In your code, before calling pdfMake.createPdf(docDefinition) set pdfMake.addFonts(...) 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.addFonts({
  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'
  }
}