Add support for WOFF2

[kennethmac2000]

WOFF2 is now at Candidate Recommendation stage and is widely supported by the most popular browsers (including Chrome and Firefox).

Is it time to add support for it to opentype.js?

[fdb]

Yes.

Can you recommend a good Brotli library for JS?

[fdb]

For reference, the WOFF2 W3 doc: https://www.w3.org/TR/WOFF2/

[joseluis]

I believe only the decompressor is needed, right? These are the libs I know of:

1. https://github.com/devongovett/brotli.js/tree/master/dec/ decode.js
   • Instead of using dictionary-data.js use dictionary-browser.js and dictionary.bin. The total extra size may well be less than 100kb.
2. https://github.com/dominikhlbg/brotlijs (discussion)

[fdb]

Coo, I'll take a look.

Encoding would be cool as well as it would allow to write woff2 fonts (we don't do this for WOFF at the moment, but would like to support it there as well).

[devongovett]

I'm using my brotli.js project in fontkit. Recently ported the decoder to JS by hand instead of using Emscripten. That ended up being much faster and smaller.

There's a bit more to decoding WOFF2 fonts than just brotli though. Here's the source code from fontkit: https://github.com/devongovett/fontkit/blob/master/src/WOFF2Font.coffee.

[fdb]

Thanks @devongovett! I know it's not just the decompression, but that's the part I didn't want to do myself :-)

[nazikus]

can someone provide a code sample how to decompress .woff2 file and parse it with opentype.js in browser?

[fdb]

Only woff is supported. Woff2 is not yet supported.

[caub]

this other repo https://github.com/bramstein/opentype seems to support woff2

[kontur]

From my superficial understanding woff2 is just a compression format. What in particular needs to get solved for this library to support woff2?

[Jolg42]

@kontur so the first official implementation of WOFF2 was not compatible to use from a browser (C++ & Node.js only).

But today thanks to brotli.js this is now doable! I just checked and indeed bramstein/opentype is using it.

For me supporting WOFF2 is as easy as integrating brotli.js in the project, so feel free to contribute 😉

[kontur]

For me supporting WOFF2 is as easy as integrating brotli.js in the project

In theory, for me, too :D

I sifted through the source to get a better understanding and checked the bramstein implementation, but I'm afraid this is way beyond my comprehension, no matter how much I'd like to help advance this. Pointers are welcome, of course, but I doubt I have the skills to implement this. From what I can tell src/opentype.js needs a different parseWOFFTableEntries specific to woff2 (different how?) and a different decompression in uncompressTable (using the brotli library linked, which I got to work, I think) based on the different signature detected in parseBuffer - but from my standpoint I'm mostly guessing at this. Is there still other aspects? :(

This library is included (second hand, via another library) in a plugin I author for type designers showcasing their webfonts. I've gotten requests to support woff2 in order to benefit from the improved load rates, so it would be great to see this feature added. If anybody can help, I and users of my plugin would really appreciate it.

[kontur]

Hey folks, I would really hope for this addition to come to the library. I've slowly been trying to get me head around how this library (and webfont internals) work and how to get woff2 to work, but I'm pretty lost.

In the branch referenced above I've tried to set up some basics needed for woff2 parsing (in the help those will be useful for others as a starting point), but in particular the parsing of the tables I don't fully comprehend, especially with those dynamic lengths of some of the fields and how to progress through them. I've added the brotli decompression, but since I'm lost with detecting the tables properly I can't really tell if it's going anywhere...

Anyway, this is a call for help, if anybody is more familiar with this library and finds this start to be of any help :)

[Jolg42]

I don't have time to check right now but I'll see if I can do something later!

[Jolg42]

I tried to debug your code, I think I'm almost there but I still have an issue...!

[kontur]

@Jolg42 Do you have it somewhere public so I could peek? I'd be curious (to educate myself ;)) what steps you took and what is still causing trouble.

[Jolg42]

@kontur only in local and there is a problem with the cmap table :(

[kontur]

Still desperately waiting for this feature <3

[kontur]

@Jolg42 Would you care to share you somewhat working version?

[kontur]

Is this anywhere near the upcoming releases even, anybody else interested in working together on this? :/

[Jolg42]

Hi @kontur So I didn't complete my first try, but I think it would be easier to use an existing project like https://github.com/fontello/ttf2woff and https://github.com/nfroidure/ttf2woff2

[jlfwong]

Hi there, for a project I'm working on, I need to be able to read woff2 fonts in-browser. I saw that sadly opentype.js doesn't yet have support for it, but I think I'll be able to work around it by converting the woff2 format to ttf first. That in itself is kind of a pain, but I think I have it working via an emscripten cross-compiled version of http://github.com/google/woff2. You can see my fork here: https://github.com/jlfwong/woff2-to-ttf.js

So my question is: would you accept a PR to add support for woff2 via this conversion? The huge downside is that it will significantly bloat the size of this library. The emscripten compiled source is around 730kB, and minification doesn't do much to reduce that.

[darkfrog26]

@jlfwong that seems like a really bad solution to the problem as apart from the increase in the source code, it will be incredibly inefficient to convert formats and then read the format rather than just read the format directly. What I've had to do to work-around this problem is do server-side conversions instead from woff2 to ttf. While still not ideal, it at least doesn't increase the client's burden significantly, and the server can cache the conversions so it only has to it once per font.

[jlfwong]

@darkfrog26 The woff (woff1 and woff2) file formats are both fancy wrappers around sfnt fonts. Both Chrome & Firefox actually do confirm from woff to TTF before parsing the information, I believe. See https://www.w3.org/TR/WOFF2/#table_format and https://www.w3.org/TR/WOFF/#OverallStructure. Essentially, woff & woff2 aren't really font formats -- they're just per-font-table compression applied to existing font files. In order to read a woff file, you need to inflate the tables, then parse them with another method anyway.

So the conversion from woff2 -> sfnt isn't doing all the same work you'd need to in order to parse a TTF font.

That said, you do still wind up with 2 copies of it in memory.

[fdb]

Ideally there would be some system to turn them on/off as needed. Something like peer dependencies in npm perhaps (https://nodejs.org/en/blog/npm/peer-dependencies/)?

I would love for OpenType.js to work with @devongovett 's Brotli decompressor (https://github.com/devongovett/brotli.js/), which is hand-ported and generally awesome.

[Jolg42]

Like @fdb I think that brotli.js is the way to go! I tried to implement it a while ago but without success unfortunately... Didn't have time to finish it since neither.

[jlfwong]

Okay! I don't intend to help with that port, but look forward to that being done :) If anyone does have an immediate need to access woff2 fonts in-browser, https://github.com/jlfwong/woff2-to-ttf.js does indeed work now.

[wdanilo]

Oh, all google fonts are woff2 now. It is so bad we dont have support for it here :( By the way - is there any active maintainer here who is looking at this topic? :)

[darkfrog26]

What I did to handle that is to use TTF fonts from Google Fonts: https://github.com/outr/youi/blob/f02a4f24c784c0fb925e5b957e23f322ff9943f5/ui/shared/src/main/scala/io/youi/font/GoogleFont.scala

[jasonsantamaria]

Jumping in here to +1 support for WOFF2