こんにちは櫻井です。
先日、Notoが字詰め(font-feature-settings)効くか検証してほしいと依頼があったので今回はそれを検証していきたいと思います。

早速検証

早速検証していきます。まずはGoogle FontsからNoto Sans JPを拝借してfont-feature-settingsを当てていきましょう。
今回は太さは「font-weight: 400」で字詰めを
・字詰めなし
・halt
・palt
・pkna
・pwid
・hkna
・kern
の7つを比較していきます。

全く詰まってないですね。やる気を微塵も感じられないレベルです。Noto Sans JPには字詰めは効かないみたいです。ですがGoogle Fontsには「Noto Sans」はいくつかありました。
ここでひとつ疑問が生じます。字詰めが効かないのはNoto Sans JPだからなのか？それともNoto Sansは全部効かないのか？
今度はこれを検証していきましょう。

他のNoto Sansを検証

今回調べる他のNoto SanはGoogle Fontsで調べた際に出てくる「Noto San TC」、「Noto San SC」、さらにNoto San JPがGoogle Fontsに追加される前に出回っていた「Noto San CJK」この3つを調べていきましょう。

まずはNoto San TCです。Noto Sans JPと同じく全く詰まってないですね。次はNoto San SCを見ていきましょう。

こちらも全くダメですね。最後にNoto San CJKを見ていきましょう。

CJKもダメでした。Noto Sanはこれで全滅です。Noto Sansはどういうわけか字詰めは効かないようですね。

ちょっと待った

これで検証を終わりにしようかと思ったんですがこんな記事を発見しました。

https://qiita.com/sutara79/items/7f0c6365e5935311b1f8

この記事のデモページを見てみたらNoto Sans CJKが詰まっていました。

なぜ？？このままでは検証を終われません。詰まっている理由を突き止めていきます。

違いはなにか？

なぜ詰まったのか違いを調べていきます。例のでもページはローカルにフォントが存在する場合とあります。ここで考えられるのはローカルに存在するNoto Sans CJKと読み込ませているNoto Sans CJKに違いがある場合です。まずは僕が検証用に読み込ませたファイルを見ていきます。

読み込ませていたのは「NotoSansCJKjp-Regular.eot」、「NotoSansCJKjp-Regular.ttf」、「NotoSansCJKjp-Regular.woff」の3つのフォントファイルでした。続いてfont bookに入っているフォントを見ていきます。

入っていたのは「NotoSansCJKjp-Regular.otf」でした。拡張子が違いますね。僕が読み込ませていないものです。読み込ませて詰まるのか見ていきましょう。

詰まりました！ここまでNotoが詰まらなかった理由はこれです。Google Fontsが読み込ませているフォントファイルの拡張子は「.woff2」というものです。「.otf」ではありません。ちなみに字詰めが効く「游ゴシック」や「ヒラギノ」も「.otf」で入っています。ではなぜ「.otf」以外の形式だと字詰めが効かないのでしょうか？ここでfont-feature-settingsについて調べてみましょう。

font-feature-settingsの機能

font-feature-settingsはOpenTypeフォントの機能の有効・無効を指定するプロパティです。つまりOpenTypeフォント以外の「.eot」、「.ttf」、「.woff」はそもそもOpenTypeフォントの機能を兼ね備えていないので指定したところで効くわけがないんです。

最後に

字詰めが効かない理由はわかったかと思いますが「じゃあ、字詰め効かせるためにOpenTypeフォントを読み込ませよう」と思う方もいると思います。ですがオススメしません。Noto Sans CJKのOpenTypeフォントをサーバーに入れて表示させようとしたところ読み込みが完了するまでに3秒ほどかかりました。その間、文字は何も表示されず画面は真っ白のままです。会社のWifiでこれなので移動中の電車の中などではさらに表示に時間がかかるでしょう。これではサイトが表示される前にユーザーが離脱してしまいます。Googleが「.woff2」というファイル形式で読み込ませているのには訳があります。その方が高速だからです。どうしても字詰めをしたいなら游ゴシックやヒラギノを使う、Notoを使うなら字詰めは諦めるなど取捨選択が必要です。