Google 日本語WEBフォント “Noto Sans Japanese”の太字がかなり綺麗！

2015/09/22 2016/11/14

Google提供の日本語WEBフォント”Noto Sans Japanese“(和名：源ノ角ゴシック)をこちらのページでテスト中です。

font-weight: 100~900;のサンプルです。本文テキストには”font-weight: 300;”を指定しています。

｢Noto Sans Japanese｣ではあらかじめ7つのウエイト(書体)が用意されています。

どうですか、この太字の綺麗さ。

｢飛｣の文字など特に書体の美しさが際立ちます。製作者の日本語に対するこだわりが感じられます。

すべてのOSで標準フォントとして採用してくれればいいのになぁ。

WEBフォントは、Webサーバーから指定のフォントを読み込みます。メリットは端末のOSに依存せず共通のフォントを表示出来ることです。

デメリットはやはり表示速度が遅いところでしょうか；；

WEBフォントを採用しているサイトでは閲覧時にテキスト部分だけ遅れて表示されるといった事が起こり得ます。

あと画数の多い漢字でところどころ文字が薄くなっている印象を受けます。ただこの現象はFirefoxだけかも。ChromeやIEではむしろくっきりし過ぎるくらいでしたので。

メイリオなどと同じフォントサイズを指定した場合、やや文字が小さく見える特徴もFirefoxだけでしょうか。

ブラウザ環境は人それぞれなので詳細はイマイチ不明です。

Noto Sans Japanese 導入方法

HTMLの <head>～</head> 内で以下のコードを記述します。

 <link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

CSS記述例

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

ダウンロードしたファイルをサブセット化、WOFFコンバータといったツールを利用して軽量化する方法もあります。今回紹介した方法に比べると導入の難易度が高い気がして却下しましたが興味のある方はぜひ挑戦してみて下さい。