Hacker News Reader

Comment by tcfunk | Hacker News Reader

I keep wanting to find a font to use on the portions of my website that contain Japanese, but they are all so big! No way I'm making my visitors download 115MB worth of font just so it looks a little nicer.

Edit: Thanks for the tips, I will look into those options :)

View on HN

The solution (more of a workaround) to this is to cut the font to just JIS X 0208 (containing Kanji level 1 and 2, total of 6,879 characters) or JIS X 0213 subset (containing Kanji level 1-4, total of 11,233 characters). It should cut the character count to the most commonly used ones, which should reduce file size by a lot (or skip JIS X and select only glyph for Kanji level 1 to reduce it even further).

There is a Subset Maker Tool[1] (in Japanese) that can do this. But you need to provide the list of characters you want to keep by yourself (searching for JIS第1第2水準漢字 usually helps).

If you do not want to do this by yourself, Google also provide a version of Noto Sans that has been stripped down to just JIS X 0208 subset in their Early Access program[1].

[1]: http://opentype.jp/subsetfontmk.htm

[2]: https://fonts.google.com/earlyaccess#Noto+Sans+Japanese

Since you mentioned that your entire site isn't in Japanese, in addition to what other people specified, I would now recommend using the CSS unicode-range selector. That allows you to list a web font declaration with a range of Unicode code points and most modern browsers now implement the optimization where it only downloads the font when text on the page contains a character in that range.

I tossed together an example several years ago:

http://chris.improbable.org/experiments/browser/webfonts/uni...

The combined example on http://chris.improbable.org/experiments/browser/webfonts/uni... has CSS which looks like this:

    @font-face {
        font-family: NotoSansCombined;
        src: local("NotoSans"), local("Noto Sans"), url(NotoSans-Regular.woff) format("woff");
    }

    @font-face {
        font-family: NotoSansCombined;
        src: local("NotoSansArmenian"), local("Noto Sans Armenian"), url(NotoSansArmenian-Regular.woff) format("woff");
        unicode-range: U+530-58F, U+FB13-FB17;
    }

    @font-face {
        font-family: NotoSansCombined;
        src: local("NotoSansBengali"), local("Noto Sans Bengali"), url(NotoSansBengali-Regular.woff) format("woff");
        unicode-range: U+AD, U+D7, U+F7, U+964-965, U+981-983, U+985-98C, U+98F-990, U+993-9A8, U+9AA-9B0, U+9B2, U+9B6-9B9, U+9BC-9C4, U+9C7-9C8, U+9CB-9CE, U+9D7, U+9DC-9DD, U+9DF-9E3, U+9E6-9FB, U+200B-200D, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+20B9, U+2212, U+25CC;
    }

    @font-face {
        font-family: NotoSansCombined;
        src: local("NotoSansCherokee"), local("Noto Sans Cherokee"), url(NotoSansCherokee-Regular.woff) format("woff");
        unicode-range: U+13A0-13F4;
    }

In modern versions of Chrome, Firefox, and Safari you can see that only downloads a few of the many language files available. This also works really nicely with the traditional CSS font stacks if your design goals allow you to specify system fonts which will work for many users so you can have a few local fonts specified before the downloadable one.

Does google fonts' css include do this directly? It's been a while since I've considered it, but would be nice to see a font-famly 'NotoSans' and 'NotoSerif' that has all the unicode ranges spec'd.

As an aside, I'd love to see something similar in a fixed-width font (where the asian block characters are double-width)

They did not in the past but a quick look at https://fonts.googleapis.com/css?family=Noto+Sans shows that they do now, at least if you request it using a modern browser.

This is not surprising since the Chrome team is generally really aggressive about performance in general and they were quick to jump on this issue:

https://bugs.chromium.org/p/chromium/issues/detail?id=247920

On a related note, I've found the Chrome team to be really responsive about i18n as well – if you report something about even fairly obscure scripts not being supported, they usually respond rapidly. Quite pleasant to see.

What you want is a font subset and google even provides[0] an API to get one.

[0] http://thenewcode.com/878/Slash-Page-Load-Times-With-CSS-Fon...

Google's Noto Sans CJK JP contains 9 font files, each about 13MB. You can edit fonts to subset glyphs or glyph sets you expect to use to further reduce the file size, although I suspect the CJK languages are never going to be as easy to get to fast web speeds. The JIS X 0208 subset still weighs in at almost 4 MB for a single OTF.

16M: NotoSansCJKjp-Regular.otf

Reply on news.ycombinator.com