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
Leave a Reply