P5.js: Some ttf font files fail to load

[aferriss]

Nature of issue?

• [x] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [x] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

When trying to load certain ttf font files I get the error "No valid cmap sub-tables found". It looks like this is originating in opentype and may be possible related to https://github.com/processing/p5.js/issues/1901 .

• p5.js version: 0.6.1
• Web browser and version: Chrome 65 and Firefox 59
• Operating System: Mac OS 10.13.3
• Steps to reproduce this:
  http://alpha.editor.p5js.org/aferriss/sketches/rkfrMH2lm
  There's a ttf file in there. I saw some people on the opentype issues page mentioning that it might have to do with how the font is extracted from a ttc font collection, but the font I'm using wasn't pulled from a ttc afaik.

[dhowe]

opentype.js does not (yet) support all cmap formats (though new ones have been added in more recent versions), so we might want to:

• verify p5.js is using the most recent version of opentype (currently v0.8.0)
• check/update tickets here - sometimes only a request is needed before a new format is added

[aferriss]

@dhowe I did just check to see if 0.8.0 of opentype would work and sadly it threw the same error. I don't know anything about how information in font files is stored. Do you know of a tool to check the cmap format of a specific font? After some digging I found otfinfo which lets me print out some information about the file but still not exactly sure what I'm searching for.

I did try printing the cmap table like otfinfo -T cmap BigCaslon.ttf but just got a bunch of garbled text. I think what I'm after is the cmap table format but I'm not sure how to query for that. Any ideas?

I'd be happy to put in a request over there if I knew a little bit more about what I was asking for :D

[dhowe]

Its not a simple topic (and I am not an expert) but you can read the font file with SynalyzeIt, as described below. There is good list of resources on font formats here and (specifically an intro to cmap) here. This link gives the specific info you need to grab the cmap table data from a file. Also this one...

This online tool parses TTF fonts, but, b/c it is based on opentype, will fail in the case above as well.

In the demo version of SynalyzeIT, open the file then specify the 'OpenType' grammar as in the image below. Then export as XML and open in your editor of choice.

For your font above, the relevant data is (I believe) here:

Why exactly this is failing in opentype is unclear to me, but I have created an issue here.

[dhowe]

So there was a response from opentype here .

Seems like the best way to validate fonts that we are trying in p5.js might be via the Microsoft Font Validator.

There is also the Font-Bakery online tool here, but (according to HinTak) this isn't as good as the above tool. Here is the output for the problematic font above, which lists many errors

[aferriss]

@dhowe Amazing, thanks for filing that over there and sharing all this! I believe that Big Caslon file was supplied with High Sierra, which is why I was so surprised to find it not working but also might explain why it didn't have the MS platform id.

One thing that seems odd to me is that the font works fine after converting it to an otf file, but again I don't know enough about these things to really make a guess as to why that would happen.

Do you have any ideas about what would be the best path forward? It seems like until there's a PR on opentype to support fonts without the MS id's this will be an issue. Is it worth trying to throw an error that suggests converting the font to another format?

[dhowe]

Can you clarify what you mean by 'works fine after converting it to an .otf file' ?

Also, I don't think it is the case that all OS X fonts fail, but maybe you can test a few to verify this?
The full list is here and they should be in /Library/Fonts.

Would be good to know what percentage of these included fonts have the same issue...

[aferriss]

@dhowe I converted the font to .otf using the link I posted above and then the font loaded without error and could be drawn to screen. Here's another test with that otf font in it so you can see that it loads without issue. There's also a few more fonts in that sketch that I found that don't work. I didn't test all system fonts, only about the first 20 or so. Seems like it's about 25% that don't work.

[limzykenneth]

From my tests, it should only affect loading font files through opentype.js, ie if I use Big Caslon directly in the sketch with textFont("Big Caslon") it works correctly. So I think this is an issue with opentype.js itself and how it handles these older fonts files.

The converted .otf probably works because of the format itself or in the conversion process it fixed whatever problem cause opentype.js being unable to parse the font.

Also from the issue @dhowe linked to (https://github.com/nodebox/opentype.js/issues/348) it seems there are no short term plan from opentype.js to extend support at the moment. I would suggest catching this error and give a helpful error message, as part of FES or not, since there doesn't seem to be much else we can do?

[dhowe]

@limzykenneth you are correct we can use the font via the DOM injection method, assuming it exists on the local machine, however we cannot get glyph, path, or point data this way

@aferriss can you repost the link to the otf converter you used?

[aferriss]

@limzykenneth Are you sure you're getting Big Caslon and not the default serif font for you browser? I think textFont("BigCaslon") will only work if your system can find the font locally, which will be different for every user. On my machine textFont("BigCaslon") defaults to the Times typeface even though it exists in /LIbrary/Fonts the browser seems not able to find it. See here Nevermind! I saw your message below and updated the sketch. I assume the discrepancy in appearance has something to do with the way opentype is reading and drawing the point data?

I do think catching the error and giving a helpful error would be good though! loadFont does already have a friendly error, but it seems like it was more targeted at errors where the font can't be found or the file path was typed incorrectly. It'd be nice if we could suggest converting the font to otf or at least some indication that the font file itself might be bad.

[aferriss]

@dhowe ah yea sorry I thought I had linked it before. I used this one: https://convertio.co/ttf-otf/

[limzykenneth]

Yes, I'm getting Big Caslon and yes I do have the font installed locally which was what I meant, locally installed fonts works fine just those that are loaded in via opentype.js may cause problem.

P.S. You need a space between "Big" and "Caslon" (at least on Mac) to actually use the system Big Caslon, the names should be the same as in the Font Book (textFont("Big Caslon"), got it wrong last time round.

[limzykenneth]

@dhowe Yeah, I'm not suggesting recommending using system font as a replacement for loading via opentype.js just that since there is no support right now, we can't do much on our end to fix this other than throw a helpful message.

[dhowe]

right, though I'm curious what transformation is happening in convertio (https://github.com/Convertio/convertio-cli)...

in any case, a helpful error message is definitely the short term fix

[dhowe]

Ok, so it looks like we have a fix for this issue (and hopefully all problems with type 0 fonts such as those distributed with OS X) in newly released v0.9.0 of opentype -- can someone integrate this into current p5.js and give it a test?

[limzykenneth]

I've just tried out the latest version with p5 and it works with all the ttf fonts @aferriss's example uses (well Farisi gave me tofu but that's expected), no errors thrown and whatever are displayed are the right fonts. I'll make a PR for the update in a bit.

[aferriss]

@limzykenneth amazing, thanks for investigating :D

[limzykenneth]

@aferriss Do try it out, make sure I didn't break anything. 😄

[aferriss]

@limzykenneth As far as I can tell it works perfectly. I just updated the package.json, are there any other changes that need to be made? Woops I just saw your PR, that's exactly what I did too so I think this can be closed. 🙌

Here's a test with a build I uploaded to the alpha editor