How do I import PDFMake custom fonts in Angular?

1

I just began reading the PDFMake’s documentation for creating a document in my Angular App, but I never had a reply.

I wondered if someone knows or could provide a legible example of how to import a PDFMake custom font (big bold font) into an Angular application, I downloaded the “Lato” font files, but I don’t have any idea where to go right 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'
  }
};

That tells me, of course, to just identify a font name and its weight and to point to the file location for the font; but then I can’t tell PDFMake to use this font.

Any help is appreciated, for some time I have tried to find ideas here.

2

Hello @Mehwish_Hayaat,

I believe you have mistaken this website for Coda is now Nova, the coding text-editor.

That being said,
I believe you have missed the part in the documentation where it says:

" You don’t need to reference the files in examples/fonts anymore because all files have been copied to the vfs_fonts.js ."

Therefore if installed in your build/vfs_fonts.js correctly it should reference your font without declaring a pathname.

If your not sure you have installed the fonts correctly, or are not using gulp to run the buildFonts script, you can run the following script:

`if [ -t 1 ]; then
target=“vfs_fonts.js”
else
target=“/dev/stdout”
fi

(
echo -n “this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {”
for file in “$@”; do
file=$1
shift
echo -n ‘"’
echo -n “$(basename $file)”
echo -n ‘“:”’
echo -n “$(base64 -w 0 $file)” # if using mac change this line to: echo -n “$(base64 -b 0 $file)”
echo -n ‘"’
if [ “$#” -gt 0 ]; then
echo -n “,”
fi
done
echo -n “};”
) > “$target”`

then just add fonts from terminal > script.sh font.ttf

3 Likes