Webフォント「Noto Sans Japanese」フォントを簡単に使う方法

2016年11月9日

Noto Fontsとは何か

Noto Fontsとは、GoogleがAdobeと協力して作ったフォント（Adobe 側は「源ノ角ゴシック」という名称で提供している）です。「世界中の言語を1つのフォントセットで表現する」という試みで作られました。
フォントセットにない文字を使うと表示される豆腐文字を撲滅するべく作られたそうです。Google言わくno more tofuとのこと。略してNotoという名前らしいです。
覚えやすい名前ですね。
特徴として、フォントの太さが7種類あるのと、見やすく美しいフォントということらしいです。

さて、そのNoto Fontsですが使う際にはちょっと気をつけなくてはなりません。
それは、何よりまずファイルサイズが格段に重い。。ということです。
というのも、日本語にはひらがなやカタカナ、漢字など膨大な文字数があるので、他の言語と比べてウェブフォントデータが重くなるのも納得できますね。
ちなみに、Noto Fontsの日本語版である「Noto Sans CJK JP」はフルサイズだと16MBほどあるようです。

このように、ファイルサイズが重いのでそのまま使うとサイトの表示速度が遅くなってしまうので、サブセット化という作業でフォントを軽量化することができるので、その参考サイトを下記に記載しておきます。

【サブセット化の参考サイト】
https://b.0218.jp/20150620044014.html
http://bamka.info/webfont-weight-saving

上記に参考サイトを記載したサブセット化とは別で、Googleのapiを利用しCSSファイル経由でNoto Sans Japaneseをダウンロードし、簡単にNoto Fontsを利用できる方法を紹介したいと思います。

スポンサードサーチ

Google api を利用してNoto Fontsを使う方法

css

このようにcssに@import文でapiを読み込み、あとはfont-familyでNoto Sans Japaneseを指定してあげれば簡単に使用することができます！
制作現場、クライアントによっては、ダウンロードして使用する場合もあるかもしれないので、その際にはサブセットを使って軽量化してフォントを使用したりと、臨機応変に使い分けるのが良さそうですね！