ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法

  • 55
    Like
  • 0
    Comment

"Noto Sans JP"のウェブフォントを利用すれば、すべての機器で文字表現を統一できます。
しかし、日本語のウェブフォントは容量が大きいです。
すでにローカルに"Noto Sans CJK JP"がインストールされているなら、ウェブフォントを読み込まずにそちらを利用したい。
そんな要望をかなえる方法です。

結論

"Noto Sans JP"のCSSにlocal("Noto Sans CJK JP")を追加するだけです。

:link: 元となるCSS
:link: 改変したCSS
:link: 表示確認用のデモページ

  @font-face {
     font-family: 'Noto Sans JP';
     font-style: normal;
     font-weight: 400;
+    src: local("Noto Sans CJK JP"),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
  }

:link: @font-faceの解説 (MDN)
:link: @font-faceのブラウザ対応状況 (Can I use)

太さに応じて"Noto Sans CJK JP Bold"のように指定を変える必要はありません。
下記のとおり、自動で太さに対応してくれます。
001.png

"Noto Sans Japanese"は使わない

現在ウェブフォントとして提供されている"Noto Sans"の日本語フォントは下記の2種類があります。
後発の"JP"ならばCSSで字詰めできます。

ウェブフォント 特徴
Noto Sans Japanese 字詰めできない
Noto Sans JP 字詰めできる

両者の詳しい違いは下記を。
:link: Google Fontsの日本語フォント「Noto Fonts」の使い方 | OXY NOTES hatena bookmark

CSSのfont-feature-settingsプロパティによる字詰めについては下記を。
:link: 文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング - ICS MEDIA hatena bookmark

検証

ふたつのウェブフォントで字詰めができるかどうか、実際に確認します。
なお、"Noto Sans CJK JP"での確認もできます。(お使いの機器に"Noto Sans CJK JP"がインストールされている場合のみ)

:link: デモページ
:link: ソースコード

下のスクリーンショットの赤枠のように、ウェブフォントの"Noto Sans JP"とローカルの"Noto Sans CJK JP"では字詰めが有効になるはずです。

001.png

ローカルの"Noto Sans JP"は使わない

ウェブフォントの"Noto Sans Japanese"をローカルにインストールすると、フォント名は"Noto Sans JP"となってしまうようです。
そのため、字詰めができるウェブフォントの"Noto Sans JP"と区別がつかなくなってしまいます。
せっかくなら確実に字詰めを有効にして全ての機器で同じ文字表現を実現したいので、今回はローカルの"Noto Sans JP"は使いません。
ただ、字詰めを使わないのであればlocal("Noto Sans JP")を追加できます。
下記のようになります。

  @font-face {
     font-family: 'Noto Sans JP';
     font-style: normal;
     font-weight: 400;
     src: local("Noto Sans CJK JP"),
+         local("Noto Sans JP"),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
          url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
  }