How can I use pdfmake custom fonts in Angular without using the gulp tool?

The standard method for installing custom font files is via the gulp tool, and that's described here: https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/

But if that fails for you, and for me on Windows it seemed to be a rabbit hole, surely there's another way to get the data in place. Yep.

Option 1 is to modify the vsf_fonts.js and pdfmake.js in the node_modules/pdfmake/build directory. In the first you're going to add your data, and in the second your're going to modify the defaultClientFonts object. I admit I'm leaving that a bit vague because the problem is, if you ever run a "npm update" or similar, you'll wipe out all those changes, option 2 below is much better, as it leaves all the stock code alone, and ultimately it's simpler. No need to verbosely and exactly describe a method that can work, that I, probably everyone else, recommends against.

My application was Angular 8 setup generating check PDFs client-side. So I needed a MICR font for that. (Edit to add: still working on all the Angular versions up to current Angular 17.)

The solution to "how to use custom fonts" that I came up with is below.

Edit: Note that pdfmake v0.2.15 in late 2024 changed the VFS structure. Leaving this unchanged, but it will only work with this exact code in v0.2.14 or lower as there is no ".vfs" anymore.

Continue reading...