4 ms·

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

by tcfunk 10y ago

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 :)

onedognight 10y ago
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-Font-Subsetting http://thenewcode.com/878/Slash-Page-Load-Times-With-CSS-Fon...
sirn 10y ago
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 http://opentype.jp/subsetfontmk.htm [2]: https://fonts.google.com/earlyaccess#Noto+Sans+Japanese https://fonts.google.com/earlyaccess#Noto+Sans+Japanese
mutagen 10y ago
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.
acdha 10y ago
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/universal-noto-sans/ http://chris.improbable.org/experiments/browser/webfonts/uni... The combined example on http://chris.improbable.org/experiments/browser/webfonts/universal-noto-sans/single-name.html 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.
- tracker1 10y ago
  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)
aidenn0 10y ago
16M: NotoSansCJKjp-Regular.otf

by tcfunk 10y ago

onedognight 10y ago

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-Font-Subsetting http://thenewcode.com/878/Slash-Page-Load-Times-With-CSS-Fon...

sirn 10y ago

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 http://opentype.jp/subsetfontmk.htm [2]: https://fonts.google.com/earlyaccess#Noto+Sans+Japanese https://fonts.google.com/earlyaccess#Noto+Sans+Japanese

mutagen 10y ago

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.

acdha 10y ago

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/universal-noto-sans/ http://chris.improbable.org/experiments/browser/webfonts/uni... The combined example on http://chris.improbable.org/experiments/browser/webfonts/universal-noto-sans/single-name.html 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.

tracker1 10y ago
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)

aidenn0 10y ago

16M: NotoSansCJKjp-Regular.otf