Custom Fonts client side

Copied from Use custom font

vfs_fonts.js assigns a "virtual-file-system" object to pdfMake.vfs

Each key of this object is a filename, while value contains base64 encoded file content.

When you run

gulp buildFonts

or

grunt buildFonts

a new vfs_fonts.js is created, containing all files from examples/fonts directory.

I'm not sure if LICENSE.txt is required or not for Roboto. I've included it just to make sure I don't break the license.

To use custom fonts, 3 steps are required:

1. create vfs_fonts.js containing your fonts
2. define font family
3. change font family in doc-definition-object

1. create vfs_fonts.js containing your fonts

Copy your fonts to examples/fonts directory

run gulp buildFonts or grunt buildFonts (you can update gulpfile.js/Gruntfile.js if you'd like to change base directory or add an alternative config for buildFonts/dump_dir task)

Use your new build/vfs_fonts.js on your web page

BTW - the above action dumps all files from examples/fonts (not only fonts), which means you could put images there, run grunt dump_dir and reference them by name in doc-definition-object

2. define font family

before calling pdfMake.createPdf(docDefinition) set pdfMake.fonts to the following object:

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

keys are font-family names you can later use in doc-definition

Each font-family defines 4 properties: normal, bold, italics and bolditalics referring to appropriate files (by default these are file paths relative to examples/fonts/)

By default pdfMake uses the following structure:

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

3. change font family in doc-definition-object

Currently pdfmake uses 'Roboto' as default family name, so in order to use your font, you should change it. The easiest way is to do it globally in defaultStyle

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

I know this it is overly complicated at the moment.

I'm going to change it in 0.2.0