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.

score 5 · Answer 1 · answered Jan 04 '22 at 23:23

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`,
    }
};

thank you very much. your and is very helpful. – Sumit patel Jun 23 '23 at 05:41 — Sumit patel, Jun 23 '23 at 05:41

score 4 · Accepted Answer · answered Jun 12 '20 at 14:43

have just spent an afternoon trying to do the same. The documentation is at minimum, but I have figured it out.

1) First you need to clone the PdfMake repo locally.

https://github.com/bpampuch/pdfmake

2) Once downloaded open it up in code or sublime and located in the hierarchy find the examples directory and then the fonts sub directory.

Mine had the Roboto font and a sample picture within it. I'm not using Roboto so I deleted it.

3) Copy into the fonts directory all the TTF fonts you want to use. Actually I was only using one, to keep the file size down.

3a) Install Gulp (if its not installed)

3b) Optionally rename

vfs_fonts.js

in the /build directory to "vfs_fonts.js.old" or something.

4) Run the following gulp command from your Terminal or Powershell...

gulp buildFonts

a new vfs_fonts.js will appear in the pdfMake/build folder.

4a) This step is optional but I needed to edit the newly created vfs_fonts.js as it didn't compile. Look at the old saved file and the new one side by side and you will see. I replaced:

var vfs = {

with the existing file declaration:

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {

and removed the last line starting...

if (typeof this.pdfMake !== 'undefined' && typeof this.pdfMake.addVirtualFileSystem !== 'undefined') { this.pdfMake.addVirtualFileSystem(vfs); } if (typeof module !== 'undefined') { module.exports = vfs; }

5) Next I copied the new vfs_fonts.js to my project where I am using PdfMake and copied the file into /assets/js

6) next change the path to the import declaration in my angular component (you should already have this):

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

import pdfFonts from '../../assets/js/vfs_fonts';

7) Create a new font in pdfMake. I only have one so all styles are referencing the same TTF

pdfMake.fonts = {
  Baloo2: {
    normal: 'Baloo2-Regular.ttf',
    bold: 'Baloo2-Regular.ttf',
    italics: 'Baloo2-Regular.ttf',
    bolditalics: 'Baloo2-Regular.ttf'
  }
}

and 8) include your new font in your pdfDefinition

defaultStyle: {
  font: 'Baloo2'
},

I suspect there are better ways to do this, but I hope this gets you going.

score 4 · Answer 3 · answered Mar 08 '22 at 19:51

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();

score 1 · Answer 4 · answered Jul 31 '20 at 01:50

1

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.

answered Jul 31 '20 at 01:50

MotoRidingMelon

2,347
2
21
28

score 1 · Answer 5 · answered Feb 13 '21 at 10:23

1

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';

answered Feb 13 '21 at 10:23

Sadegh Maasoomi

132
4

score 1 · Answer 6 · answered Jun 03 '22 at 18:36

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: [...]
}

score 0 · Answer 7 · answered Apr 11 '23 at 13:57

If someone is using Webpack, this worked for me:

const foo = require('./fonts/Roboto-Regular.ttf');

pdfMake.fonts = {
  foo: {
    normal: `${window.location.origin}/${foo}`
  }
};

const dd = { 
  defaultStyle: {
   font: 'foo'
  }
};

pdfMake.createPdf(dd).download(`pdf_with_table_of_content.pdf`);

score 0 · Answer 8 · answered Apr 17 '23 at 07:31

0

My problem in the same context (trying to install new fonts for pdfMake) in an angular project is that pdfMake.fonts says "Cannot assign to 'fonts' because it is a read-only property.ts(2540)"...

answered Apr 17 '23 at 07:31

Nicola

101
1
9

I think that this may be an issue with the @types/pdfMake library - you can still set it if you use (pdfMake as any).fonts – C. Biscuit Jul 26 '23 at 14:04

How to import custom fonts for PDFMake in Angular application?

8 Answers8

Linked