Google Web Font for Japanese

by
Jill Lasak

Noto Sans Japanese is still in Google's "Early Access" phase, so there may be some bugs to work out. I wouldn't recommend using this in production quite yet.

I wrote previously about the state of webfonts in Japanese web development, but there's been a new development.

Google has added it's very first Japanese web font: Noto Sans.

Google is touting Noto Sans as it's first truly global font face, with a goal of supporting all of the world's languages. Adding Chinese and Japanese support is a big step in reaching that goal.

Noto Sans Japanese in use

Let's see this font in action. Noto Sans Japanese (Font weight 200):

Noto Sans Japanese font weight 200

For comparison: Hiragino Kaku Gothic Pro (a web-safe font for recent macs)

Hiragino Kaku Gothic Pro font on mac

Concerns about Japanese web fonts

As mentioned in my previous article about Japanese web fonts in multilingual sites, there is a huge challenge to implementing Japanese web fonts: The sheer amount of characters in Japanese makes font file sizes enormous, and adversely affects loading speed. When I saw that Google had started to launch its first Japanese web font, I was particularly concerned about 2 things:

  1. The effect on loading time of the page.
  2. The amount of Kanji coverage.

To find the answer to my first question, I tested the loading time on a sample site, and was pleasantly surprised at the fast loading speed. It was comparable to an English Google Font. However it was a little slower than I find acceptable on my mobile device (a few extra seconds of loading time). I'm not sure if I have a particularly bad connection or what, but I would recommend testing the loading speed on different devices and internet connections if you are serious about using this font.

To answer point 2: According to http://www.google.com/fonts/earlyaccess, "Note: Noto Sans Japanese has been subsetted to 6,934 characters and contains most of the characters defined by JIS X 0208. This includes 6,355 Kanji as well as 579 non Kanji characters."

Indeed there was no Kanji on my test site that the font didn't support.

How can I try Noto Sans for myself?

If you'd like to test the new font in a development environment, you can add it to you website in two simple steps:

Step 1. At the top of your css file, add:

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

Step 2. Add the following two propeties to your body tag, or wherever you want to add the font.

body { font-family: 'Noto Sans Japanese', serif; font-weight: 200; }

Conclusion

As a web developer in Japan, I was thrilled to see some progress being made in this area. Noto Sans is a great start - it comes in all font weights between 100 and 800. (I'm partial to the 200 weight myself, and that's what's being used in the above examples.) It's an elegant font and maybe even a little cutesy, which can be great for many Japanese websites.

This is a big step forward and I'm excited to see stable support, and more open source Japanese web fonts to come in the future!

CONTACT

制作に関するご相談は下記までお気軽にお問い合せ下さい。

TEL:077-572-7155
[ 受付時間10:00-19:00 日祝休 ]
Shiga Office
〒520-0832滋賀県大津市粟津町2-63 CS石山ビル2F
TEL 077-572-7155
Tokyo Office
〒150-0002東京都渋谷区渋谷1-17-1 TOC第2ビル3F
TEL 03-6808-2878