[Japanese Web Font] Google Fonts Noto Sans

The recent Japanese website I am working on required ‘Noto Sans CJK Japanese’ font from the designer. I downloaded Noto Sans CJK Japanese from Google website only to find that the font files are provided in .OTF (Open Type) with the size of 16 – 17 MB for each weight.

I tried many online web font generator to convert this 16MB file to woff, eof, ttf but all the generators failed because of the file size. I have also tried FontPrep – the web font generator application on Mac, but it doesn’t support custom subset conversion.

I tried using only provided .OTF as @font-face, but the console error occurs. There is no documented solution to this. See this blog in Japanese

After several hours of finding, I found this reference website which give the URL for Noto Sans on Google Fonts ! I was looking for this but couldn’t find it in Google Fonts website.

How to use Noto Sans CJK Japanese in Google Fonts

1) Link to this CSS file:

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

2) Add this CSS:

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

Done ! 😀

Reference: https://www.studio-umi.jp/blog/google-web-font-japan


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *