Pdfmake: multiple fonts in a PDF

Created on 18 Aug 2016  路  6Comments  路  Source: bpampuch/pdfmake

is there a way to apply different fonts in a single PDF creation?
sample:

{
   stack : [
      { 
         text : this is a test text
         fontStyle  : 'roboto',
         italic : true
      }, { 
         text : this is another test text
         fontStyle : 'open-sans',
         bold : true
      }  
  ]
}

or something close to that?

Most helpful comment

[Closing this issue]
sorry just figured out how to do this. just incase anyone is looking for this i'll just leave an example on how to do this.

as it is shown in setting up custom fonts we add any new font here with a corresponding key

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

}

So now it can be used as

{
   stack : [
      { 
         text : this is a test text
         font  : 'OpenSans',
         italic : true
      }, { 
         text : this is another test text
         font : 'Roboto',
         bold : true
      }  
  ]
}

All 6 comments

[Closing this issue]
sorry just figured out how to do this. just incase anyone is looking for this i'll just leave an example on how to do this.

as it is shown in setting up custom fonts we add any new font here with a corresponding key

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

}

So now it can be used as

{
   stack : [
      { 
         text : this is a test text
         font  : 'OpenSans',
         italic : true
      }, { 
         text : this is another test text
         font : 'Roboto',
         bold : true
      }  
  ]
}

so , we include two vfs_fonts.js or what ??? or we create one vfs_fonts.js containing two fonts?

  1. copy all font files to folder examples/fonts/ ( + remove unnecessary files )
  2. run gulp buildFonts
  3. it creates a new file build/vfs_fonts.js

@Darbiol hi, where did you put the font files in your project? by the way, im using angular 6,

my code is this

const docDefinition = this.createDocumentDefinition(new Date(), headers, tblData);
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
noto: {
normal: 'NotoSansKannada-Regular.ttf',
bold: 'NotoSansKannada-Bold.ttf',
italics: 'NotoSansKannada-Black.ttf',
}
};

the fonts are located under assets folder:

assets/fonts/NotoSansKannada-Regular.ttf

but i got an error:

ERROR Error: Uncaught (in promise): File 'NotoSansKannada-Regular.ttf' not found in virtual file system
at resolvePromise (zone.js:831)

is there something that i need to change?

@Darbiol hi, where did you put the font files in your project? by the way, im using angular 6,

my code is this

const docDefinition = this.createDocumentDefinition(new Date(), headers, tblData);
pdfMake.vfs = pdfFonts.pdfMake.vfs;
pdfMake.fonts = {
noto: {
normal: 'NotoSansKannada-Regular.ttf',
bold: 'NotoSansKannada-Bold.ttf',
italics: 'NotoSansKannada-Black.ttf',
}
};

the fonts are located under assets folder:

assets/fonts/NotoSansKannada-Regular.ttf

but i got an error:

ERROR Error: Uncaught (in promise): File 'NotoSansKannada-Regular.ttf' not found in virtual file system
at resolvePromise (zone.js:831)

is there something that i need to change?

Try this https://github.com/bpampuch/pdfmake/issues/864#issuecomment-298341323

Also make sure to read https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/

@quantumcat1 I have this problem too if you are already done with this share me please

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jkd003 picture jkd003  路  3Comments

sayjeyhi picture sayjeyhi  路  3Comments

MathLavallee picture MathLavallee  路  3Comments

ValeSauer picture ValeSauer  路  3Comments

davidyeiser picture davidyeiser  路  3Comments