Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

:warning: 2018年6月29日現在、ウェブフォントの「Noto Sans JP」で字詰めできなくなっていることを確認しました。
Googleが仕様を変更したのかもしれません。


"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 Regular"),
           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');
   }

でもページは下記のように表示されるはずです。
001.png

以前は太さに関係なくNoto Sans CJK JPと指定するだけで自動で太さに対応してくれました。
しかし、現在では下記のように個別に指定する必要があります。
- src: local("Noto Sans CJK JP Thin"),
- src: local("Noto Sans CJK JP Light"),
- src: local("Noto Sans CJK JP Regular"),

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

"Noto Sans Japanese"は使わない

:warning: 2018年6月29日現在、ウェブフォントの「Noto Sans JP」で字詰めできなくなっていることを確認しました。
Googleが仕様を変更したのかもしれません。


現在ウェブフォントとして提供されている"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');
  }
sutara79
宮崎 雄策。1979年生まれ。PHP(Laravel)、 JavaScript(jQuery)、英語を勉強中の文系Webプログラマ。
https://ja.gravatar.com/sutara79
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした