Issue with custom font - Myriad-Pro-Bold

[samuraitruong]

I try to add custom font but it seem doesn't work with all font

I can get Roboto.ttf work but it doesn't work with this font - https://fontsgeek.com/fonts/Myriad-Pro-Bold

Got below error

sPDF PubSub Error Cannot use 'in' operator to search for '0' in undefined TypeError: Cannot use 'in' operator to search for '0' in undefined
    at GlyfTable.glyphFor (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:35270:12)
    at Subset.glyphsFor (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:35599:35)
    at Subset.encode (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:35638:19)
    at identityHFunction (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:30831:39)
    at Object.<anonymous> (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:30897:7)
    at PubSub.publish (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:404:18)
    at putFont (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:2273:12)
    at putFonts (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:2304:11)
    at putResources (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:2659:5)
    at API.__private__.buildDocument (/Users/truongnguyen/Truong/pdf-generator/node_modules/jspdf/dist/jspdf.node.js:3232:5)

Here is the code I added all the front

addFonts() {
    const fonts = fs.readdirSync('./fonts');
    for (const font of fonts) {
      const base64Front = fs.readFileSync('./fonts/' + font).toString('base64');

      this.doc.addFileToVFS(font, base64Front);
      const arr = font.split('.')[0].split('-');
      this.doc.addFont(font, arr[0], arr[1].toLocaleLowerCase());
    }
  }

Do we have the list or the requirements for the custom font support?

I already try fontconverter provided in other issue and compare base64 are same

[HackbrettXXX]

jsPDF supports only a subset of ttf fonts. Maybe its something similar as this: #2710 (comment)?

[samuraitruong]

@HackbrettXXX Not very sure about that because when I use Myriad Pro-Regular.ttf it also gives me the same error

[HackbrettXXX]

Your code seems to be correct, so I assume it's either a bug in jsPDF or jsPDF simply does not support such kinds of fonts.

For some reason GlyfTable.parse is not called. Probably because info is undefined here: https://github.com/MrRio/jsPDF/blob/master/src/libs/ttffont.js#L488. Someone should investigate this.

[samuraitruong]

@HackbrettXXX I think it is some problem with the variable of that fonts, I try with the same font name, but get the font from other source and it works for me now

If that something can be resolveable then it will good to fix, otherwise we need to learn which type of font supported and document it

This is the same font but work for me - https://github.com/celsodantas/wak/blob/master/app/assets/stylesheets/fonts/MyriadPro-Regular.ttf

[HackbrettXXX]

Yeah, I think it's the way the font is encoded. You can encode the same font in multiple ways in the ttf format.

[listopadiya]

I can take a look at this issue :)

[listopadiya]

After small investigation I would say that this is font-related problem. Despite the fact that font https://fontsgeek.com/fonts/Myriad-Pro-Bold has TTF type in description, as I understand it is not TrueType font in the end (probably it should have OTF type there), this can also be seen in working- and non-working-font descriptions in Windows (TrueType outlines for working font vs. PostScript Outlines for non-working):

I changed file extension from .ttf to .otf, then used this service https://convertio.co/ and converted problematic font to .ttf, and then it worked. Is it supposed that jsPDF supports OTF? Probably it can be planned as a feature or this workaround with font conversion can be added somewhere to help section.

From the code point of view @HackbrettXXX was right, info for glyf tag is undefined because there is no glyf table in that font, as well as no loca table. Instead of them there is CFF table for glyphs, which is typical for PostScript Outlines (like described here https://www.fontspring.com/support/font-file-formats). I've also tried another open-source ttf font parser and it was throwing exception for that font because of missing tables too.

[HackbrettXXX]

@listopadiya Thanks for the investigation. OTF fonts are not supported, but there is an open feature request: #2276. I added a comment about the CFF tables. I think we can close this now.