How to import custom fonts for PDFMake in Angular application?

Question

I just started reading into PDFMake's documentation to build a document in my Angular app, I've come across some questions like this one but never got an answer.

I was wondering if someone knows or could provide a readable example of how to import custom fonts for PDFMake in an Angular application, I've downloaded the files for the "Lato" font, but I have no clue on where to proceed now.

I did import the library as shown on the documentation:

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

I also saw an example where an additional declaration was made like this:

pdfMake.fonts = {
  Lato: {
    normal: 'assets/fonts/Lato-Regular.ttf'
  }
};

Which of course tells me to just define a name for the font, the weight of it, and point to the location of the file for that specific font; but after that I don't know how to actually tell PDFMake to use that font.

Any help is appreciated, I have been trying to find solutions for this for a while.

EDIT: Following the docs, I was able to use the Lato font, by directly modifying the files found in the pdfmake node_modules directory, it works, but I'd like to avoid making changes to node_modules since I wouldn't be able to keep track of those changes or have them available when running the project on a different machine.

Answer 1

There is an easier way than the accepted answer now (since version 0.1.66 - released only 18 days after the accepted answer was written). Since then you can load fonts via URL and in Angular do this:

pdfMake.fonts = {
    DDIN: {
        normal: `${window.location.origin}/assets/D-DIN.ttf`,
        bold: `${window.location.origin}/assets/D-DIN-Bold.ttf`,
        italics: `${window.location.origin}/assets/D-DIN-Italic.ttf`,
    }
};

Answer 2

Issue: default font family is Roboto in pdfmake, but I want Arial as my font family.

I have encountered this issue in my Angular Project and got resolved by doing following steps.

1/Install "pdfmake-font-generator" package globally

npm i -g pdfmake-font-generator

2/ Download required font files, In my case Arial, so used below link

https://www.cufonfonts.com/font/arial

3/ store them somewhere ,for example in assests/fonts folder

4/ Generate custom font file by using above installed package

pdfmakefg assets/fonts assets/custom-fonts.js

it contains 2 params , 1st one is location where our files exist, 2nd one location and filename, which has to be generated(cutom-fonts.js file need not to be exist before)

5/ Now, where ever you are using the pdfmake, you will find below line, comment that and use your own custom fonts

// import pdfFonts from 'pdfmake/build/vfs_fonts';

import pdfFonts from "./../assets/custom-fonts";

6/ Now use it as below while defining the document

pdfMake.fonts = {
 'Arial' : {
   normal: 'ARIAL.TTF',
   bold: 'ARIALBD.TTF',
   italics: 'ARIALI.TTF',
   bolditalics: 'ARIALBI.TTF'
 }
}

const documentDefinition = {
 content: '',
 defaultStyle: {
  font: 'Arial'
 }
}
pdfMake.createPdf(documentDefinition).open();

Answer 3

I had a rough time getting Gulp working on Windows, so I went with a simplified method that skipped Gulp entirely. I posted it Q&A style here: How can I use custom fonts in pdfmake without using the gulp tool?

Yes, it was for Angular.

Answer 4

If you use a typing script, import it as follows:

import * as pdfMake from 'pdfmake / build / pdfmake';
import * as pdfFonts from 'pdfmake / build / vfs_fonts';

Answer 5

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = {
  ...pdfFonts.pdfMake.vfs,
  'Your-font-name-normal.ttf': 'Your font as base64 format'
};

// add font to fonts collection before generate pdf
pdfMake.fonts = {
  YourFontName: {
    normal: 'Your-font-name-normal.ttf',
  },
};

const docDefinition = {
  defaultStyle: {
    font: 'YourFontName', // your font name here
  },
  content: [...]
}