Converting CJK Fonts to WOFF is Harder Than You'd Think
tl;dr: Don't even try online converters. They'll drop the CJK characters. Just install
woff-tools
and/orwoff2
on your own machine. Most Linux package managers will have them; on Windows, you can use the EXEs in this GitHub repo.
A few days ago, I needed to install a web font (Noto Sans JP) for Japanese text on a site I was working on. The site supports IE11, so I would at least need a WOFF file, and a WOFF2 for newer browsers.
The obvious place to look was Google Fonts. It used to provide a ZIP download of any web font in multiple formats (at least TTF, WOFF, and WOFF2). But Google Fonts seems to have removed this feature; ZIP downloads only include OTF files now. If I wanted IE11 support, I'd need to convert these to WOFF.
That should be easy, right? Googling "convert OTF to WOFF" turns up dozens of online web font converters. These usually convert just the ASCII subset of characters by default, but some of them provide custom subsetting options. Except…
Yeah, Japanese is nowhere to be found. Several other complex scripts are missing too, like Chinese, Korean, and Arabic. This was true for every online converter I tried.
Luckily, some of these converters support custom Unicode ranges. According to
this StackOverflow answer, the Unicode ranges for Japanese text are
3000-303f
, 3040-309f
, 30a0-30ff
, ff00-ffef
, and 4e00-9faf
. So let's
try those.
The first converter I tried was Transfonter. I put in the custom Unicode ranges, and it converted the files… sort of.
See those file sizes, including the download file size on the top left? Sure, OTF→WOFF should reduce the file size, but 13MB to 39KB just seems too good to be true. I tried including a TTF file in the result, opened it in a font viewer, and, sure enough, the Japanese characters aren't there.
OK, what about Font Squirrel? It seems like the most full-featured and professional online converter. So I tried uploading the OTF file, and…
52 glyphs?!
This was a theme in every converter I tried. They don't recognize that Japenese characters exist, even if subsetting is disabled. I would assume this is true for any script that isn't listed in the Unicode subsets section.
OK, let's try this a different way. What software do these online converters use to convert the files? Is there a command-line tool I can use for this?
It turns out that there are two: woff-tools
for WOFF, and woff2
for WOFF2.
The actual executables are called sfnt2woff
and woff2_compress
.
If, like me, you use Debian Linux, then this is all you need to know: both of these apps are available as APT packages.
$ apt install woff-tools woff2
If you use a different OS, things might be trickier. woff2
is easy to set up;
it's just an open-source C++ project on GitHub. But woff-tools
,
though technically open-source, is only available on a people.mozilla.org
page that requires a login and permission to access. Luckily, there's
a GitHub repo with Windows binaries of both sfnt2woff
and
woff2_compress
.
I haven't tried any of this on Mac, but it looks like both of these utilities are available on Homebrew too.
Once we have the utilities, converting the OTFs to WOFFs is easy:
$ sfnt2woff NotoSansJP-Light.otf
$ woff2_compress NotoSansJP-Light.otf
Finally, working Japanese WOFF files!
WOFF2 compression actually reduces the size of these 4MB font files by half. And it's supported in all modern browsers, so there's no reason to serve the OTF files Google Fonts gives you.