Question

64

pdfMake: Use System Fonts

rated 0 times [ 66] [ 2] / answers: 1 / hits: 20851 / 10 Years ago, wed, august 13, 2014, 12:00:00

I am using the pdfMake-library to generate PDF documents on the client side in one of my applications. My main problem when using the library is that it relies on having available fonts in a virtual file system. The fonts are therefore sent to the client in a JavaScript file called vfs_fonts.js and are then loaded into the virtual file system and later embedded in the resulting PDF-file (of course only the used character subset of the whole font).

With the default settings the library uses the Roboto font and therefore sends a little more than 800kb only for the fonts. My main intuition here is:

Why doesn't it use the system fonts and as a result saves traffic?

Is there a workaround to make it use system fonts?

My current approach to reduce the traffic is to remove the font styles from the vfs_fonts.js that aren't used in the documents that I create. E.g. I remove the italic, bold style and italic/bold style when only using regular styles. With this method I was at least able to reduce the size of the font file by 3/4.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

markusdamienn

Add To Favorites

Follow

Total Points: 167

Total Questions: 119

Total Answers: 93

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

answered 10 Years ago blaisep · Accepted Answer

I am also using PDFmake and I have encountered a similar problem.

You have to add any new source through a corresponding key, like this:

pdfmake.fonts = {

   'Roboto' : {

      normal: 'Roboto-Regular.ttf',

      bold: 'Roboto-Medium.ttf',

      italics: 'Roboto-Italic.ttf',

      bolditalics: 'Roboto-Italic.ttf'

   },



   'OpenSans' : {

      normal: 'OpenSans-Regular.ttf',

      bold: 'OpenSans-Medium.ttf',

      italics: 'OpenSans-Italic.ttf',

      bolditalics: 'OpenSans-Italic.ttf'

   }



}

Then in the PDF content you must add the "font" that you are going to use.

{

   stack : [

      { 

         text : 'this is a test text',

         font  : 'OpenSans',

         italic : true

      }, { 

         text : 'this is another test text',

         font : 'Roboto',

         bold : true

      }  

   ]

}

I hope you find it a good solution for people who are looking for a solution.

Source here. Thanks to Daniel Arbiol (Darbiol).