Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for WOFF2 #183

Open
kennethmac2000 opened this issue Apr 9, 2016 · 32 comments
Open

Add support for WOFF2 #183

kennethmac2000 opened this issue Apr 9, 2016 · 32 comments
Labels

Comments

@kennethmac2000
Copy link

@kennethmac2000 kennethmac2000 commented Apr 9, 2016

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

This comment has been minimized.

Copy link
Contributor

@fdb fdb commented Apr 10, 2016

Yes.

Can you recommend a good Brotli library for JS?

@fdb

This comment has been minimized.

Copy link
Contributor

@fdb fdb commented Apr 10, 2016

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

@joseluis

This comment has been minimized.

Copy link

@joseluis joseluis commented Apr 10, 2016

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

This comment has been minimized.

Copy link
Contributor

@fdb fdb commented Apr 10, 2016

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

This comment has been minimized.

Copy link

@devongovett devongovett commented Apr 10, 2016

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

This comment has been minimized.

Copy link
Contributor

@fdb fdb commented Apr 10, 2016

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

@nazikus

This comment has been minimized.

Copy link

@nazikus nazikus commented Jul 22, 2016

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

@fdb

This comment has been minimized.

Copy link
Contributor

@fdb fdb commented Jul 22, 2016

Only woff is supported. Woff2 is not yet supported.

@Jolg42 Jolg42 added the enhancement label Oct 4, 2016
@caub

This comment has been minimized.

Copy link

@caub caub commented Jan 15, 2017

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

@kontur

This comment has been minimized.

Copy link

@kontur kontur commented Mar 23, 2017

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

@Jolg42

This comment has been minimized.

Copy link
Collaborator

@Jolg42 Jolg42 commented Mar 23, 2017

@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

This comment has been minimized.

Copy link

@kontur kontur commented Mar 24, 2017

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 added a commit to kontur/opentype.js that referenced this issue Apr 20, 2017
@kontur

This comment has been minimized.

Copy link

@kontur kontur commented Apr 20, 2017

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

This comment has been minimized.

Copy link
Collaborator

@Jolg42 Jolg42 commented Apr 20, 2017

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

@Jolg42

This comment has been minimized.

Copy link
Collaborator

@Jolg42 Jolg42 commented May 3, 2017

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

@kontur

This comment has been minimized.

Copy link

@kontur kontur commented May 10, 2017

@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

This comment has been minimized.

Copy link
Collaborator

@Jolg42 Jolg42 commented May 10, 2017

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

@kontur

This comment has been minimized.

Copy link

@kontur kontur commented May 14, 2017

Still desperately waiting for this feature <3

@kontur

This comment has been minimized.

Copy link

@kontur kontur commented Jun 1, 2017

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

@kontur

This comment has been minimized.

Copy link

@kontur kontur commented Sep 27, 2017

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

@Jolg42

This comment has been minimized.

Copy link
Collaborator

@Jolg42 Jolg42 commented Sep 27, 2017

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

This comment has been minimized.

Copy link

@jlfwong jlfwong commented Oct 8, 2017

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

This comment has been minimized.

Copy link

@darkfrog26 darkfrog26 commented Oct 8, 2017

@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

This comment has been minimized.

Copy link

@jlfwong jlfwong commented Oct 8, 2017

@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

This comment has been minimized.

Copy link
Contributor

@fdb fdb commented Oct 8, 2017

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

This comment has been minimized.

Copy link
Collaborator

@Jolg42 Jolg42 commented Oct 8, 2017

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

This comment has been minimized.

Copy link

@jlfwong jlfwong commented Oct 8, 2017

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

This comment has been minimized.

Copy link

@wdanilo wdanilo commented Jan 12, 2018

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

This comment has been minimized.

Copy link

@darkfrog26 darkfrog26 commented Jan 12, 2018

@jasonsantamaria

This comment has been minimized.

Copy link

@jasonsantamaria jasonsantamaria commented Jan 29, 2018

Jumping in here to +1 support for WOFF2

@kontur

This comment has been minimized.

Copy link

@kontur kontur commented Jan 29, 2018

Has anybody actually been able to use any of the preliminary testing I did in my April 2017 branch; as I recall I just tried to apply the decompression, but was stuck with the tables. I still would very much need this myself, but my programming experience is mostly in building interfaces, so with decompressing font tables I am somewhat lost.
@Jolg42 if you have anything more than me, even with parts not working, I would love to peek and see what we can scratch together, even shared in private if you don't want "wip" code public.

It will soon turn 2 years since this issue was first opened, and by now woff2 is quickly overtaking woff in terms of actual webfont use. I wish I could do more :/

@vinuel

This comment has been minimized.

Copy link

@vinuel vinuel commented May 3, 2018

It would be really cool to have a way to decompress WOFF2 files with brotli.js first and then parse it with opentype.js ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.