Google Fonts が日本語に対応してた

no extension

前回の記事を書いてて気付いたのだが， Google Fonts が正式に日本語に対応してるぢゃん！ おじさん気がつかなかったよ orz

これで日本語 Web フォントを指定するのに Early Access 版を使ったり，自前で巨大フォントファイルを用意しなくてもよくなったんだね。

たとえば Web フォントを NOTO フォントで統一するなら <head> 要素内に

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Sans|Noto+Serif|Noto+Serif+JP&display=swap">

と記述すればよい1。 NOTO Sans の太字もご所望なら

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Noto+Sans:400,700|Noto+Serif|Noto+Serif+JP&display=swap">

という感じにウェイトを指定できる2。

Web ページ側のスタイルは，たとえば

body {
  font-family: 'Noto Serif', 'Noto Serif JP', serif;
  font-weight: 400; /* normal */
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700; /* bold */
}

こんな感じで記述していけばいいだろう。

ちなみにブラウザの設定によっては Google Fonts を追跡コードとみなしてブロックする場合があるので既定値（serif や sans-serif）の指定を忘れないこと。

よしよし。 これでよーやくフォント周りの懸念がなくなった。

【付録】 Google Fonts スタイルの中身

たとえば NOTO Sans のみを指定する場合は，スタイルシートの指定は以下のようになるが

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans&display=swap">

中身を見るとこんな感じになっている（一部のみ）。

/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr6zRAW_0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

このように単一のフォント・データではなく，いくつかのサブセットに分けてダウンロードさせているようだ。 NOTO Sans のラテン文字は上の2つのようだが（他の文字のサブセットもある），日本語の NOTO Sans JP では，なんと！ 120に分割されていた。

更に言うと， href 属性で指定される URL のクエリ部に display=swap がくっ付いているのに気づかれただろうが，これを指定すると @font-face ルールのプロパティとして font-display: swap; がセットされるようだ。

不勉強で font-display については知らなかったのだが，このプロパティに swap がセットされていると Web フォントがロードされるまでの間，代替フォント（sans-serif など）で表示されるらしい。

font-display の仕様は割と最近にできたものらしく，対応していないブラウザも一部あるようだ（ここで対応ブラウザを確認できる）。

ちなみに Android 版 Firefox も font-display に対応しているのだが，フォントが入れ替わるたびに画面がちらつくのが鬱陶しい。 この辺は要改良ってところなんだろう。

日本語フォントは巨大だが，このような仕組みを使って，できるだけストレスのないよう工夫されているわけだ。

ありがとう！

ブックマーク

  1. URL のクエリー部（? 以降の文字列）に | や : の文字を使うと W3C の Validator に怒られるのでご注意を。大抵はブラウザが上手く解釈してくれるので問題ないのだが。気になるなら %7c や %3a といったパーセント・エンコーディングに置き換えればよい。 ↩︎

  2. 400 とか 700 とかの値は CSS の font-weight に設定する数値。 font-weight の normal が 400 に相当する。ちなみに bold は 700。 bolder で 400 → 700 → 900 と太くなる。 lighter だと 400 → 100 と細くなる。普通の文章であれば 400 のみで十分だし，太字が必要な場合でも追加で 700 を用意しておけば問題ないだろう。 ↩︎