結局 Noto Serif JP を Web フォントとして導入した

昨日の話で「Noto Serif の和文フォントが Web フォントで登場するまでは「さわらび明朝」で頑張る」と書いたばっかりなのに，日和りました。意思が弱いな，私。

厳密には本家サイトの方に導入してその設定を丸々こっちにも適用した。ので，今回はその覚え書き。

【2019-12-29 追記】 現在の Google Fonts は日本語を含む各国語に正式対応している。

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

このサイトも Google Fonts に全面的に乗り換えた。したがってこの記事はもう有用ではないが「こんな時代もあったよね」って感じで残しておく。

Noto Serif JP の取得

Noto Serif の和文フォントは以下から取得できる。

Noto CJK – Google Noto Fonts

このページの後半の方に “Region-specific Subset OpenType/CFF (Subset OTF)” というのがあるので，ここから NotoSerifJP-[weight].otf のリンク先の zip ファイルを取得する。 Web フォント用ならこのサブセットでも大きすぎるくらいだが，まぁいいだろう。

Zip ファイルを展開すると，以下の OTF (OpenType Font) ファイルがある。括弧内の数字はウェイト数である¹。

NotoSerifJP-ExtraLight.otf (200)
NotoSerifJP-Light.otf (300)
NotoSerifJP-Regular.otf (400)
NotoSerifJP-Medium.otf (500)
NotoSerifJP-SemiBold.otf (600)
NotoSerifJP-Bold.otf (700)
NotoSerifJP-Black.otf (900)

はっきり言って通常の文章の中で明朝体の太さを変えることはないが（強調するときはゴシック体にする），今回は念のため Regular と Bold のふたつのフォントを導入した。

WOFF/WOFF2 フォントの生成と CSS の作成

取得した OTF ファイルから WOFF (Web Open Font Format) および WOFF2 (Web Open Font Format 2.0) 形式のファイルを生成する。使用しているマシンが Windows か macOS なら以下のフリーソフトがお勧めである。

WOFFコンバータ

Web サービスだと，以下のページで WOFF の生成ができるようだ

Online font converter

WOFF2 は比較的新しいフォーマットだが，データの圧縮率が WOFF よりもいいため，こちらのほうがお勧めである。最近のブラウザならほぼ対応している（IE と Opera mini は無視していいと思う）。

WOFF 2.0 - Web Open Font Format

作成したフォント・ファイルを読み込むための CSS ファイルを書く。フォント・ファイルと同じディレクトリに CSS ファイルを置いて，こんな感じに書いてみた。

/*
 * Original: Noto Serif CJK (Subset OTF; Japanese) https://www.google.com/get/noto/help/cjk/
 * Converted by WOFF Converter https://opentype.jp/woffconv.htm
 * License: https://baldanders.info/fonts/NotoSerifJP/LICENSE_OFL.txt
 * README: https://baldanders.info/fonts/NotoSerifJP/README
 */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  src: url('./NotoSerifJP-Regular.woff2') format('woff2'),
       url('./NotoSerifJP-Regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  src: url('./NotoSerifJP-Bold.woff2') format('woff2'),
       url('./NotoSerifJP-Bold.woff') format('woff');
  font-weight: 700;
}

src 指定で WOFF2 ファイルを先に書くのがポイントである。これを読み込ませて

body {
  font-family: 'Noto Serif JP', serif;
}

てな感じにフォントを指定すればよい。

CORS の指定

今回は本家サイトに Noto Serif JP を導入し，それをこのブログサイトでも使おうと目論んでいるのだが，単純に

<link rel='stylesheet' href='https://baldanders.info/fonts/NotoSerifJP/NotoSerifJP.css' type='text/css'>

と Web フォントを記述した CSS ファイルをリンクしただけでは使えない。 JavaScript の XMLHttpRequest と同じく， Web フォントも（主にセキュリティ上の理由から）別ドメインからの読み込みが既定で禁止されているためだ。

この制約を解除するには Web フォントを提供する側で HTTP レスポンス・ヘッダに Access-Control-Allow-Origin 情報を付加して相手先を指定する必要がある。

さくらのレンタルサーバなら .htaccess ファイルに

# Cross-Origin Resource Sharing
<FilesMatch "\.(woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: https://text.baldanders.info
  </IfModule>
</FilesMatch>

と記述すればヘッダに追加されるようだ。相手先の指定を * にすると任意のサイトからアクセスし放題になるので，ご注意を。

ローカルのフォントも有効にする

（ブラウザ側の設定などで） Web フォントが使えない場合でも，ローカルマシンに Noto 和文フォントがあれば優先的に参照できるようにした。まずはこんな感じで CSS を書く。

@font-face {
  font-family: 'NotoSansJP-local';
  font-style: normal;
  src: local("Noto Sans JP"), local('NotoSansJP');
}
@font-face {
  font-family: 'NotoSansJP-local';
  font-style: normal;
  src: local("Noto Sans JP Regular"), local('NotoSansJP-Regular');
  font-weight: 400;
}
@font-face {
  font-family: 'NotoSansJP-local';
  font-style: normal;
  src: local("Noto Sans JP Bold"), local('NotoSansJP-Bold');
  font-weight: 700;
}
@font-face {
  font-family: 'NotoSerifJP-local';
  font-style: normal;
  src: local("Noto Serif JP"), local('NotoSerifJP');
}
@font-face {
  font-family: 'NotoSerifJP-local';
  font-style: normal;
  src: local("Noto Serif JP Regular"), local('NotoSerifJP-Regular');
  font-weight: 400;
}
@font-face {
  font-family: 'NotoSerifJP-local';
  font-style: normal;
  src: local("Noto Serif JP Bold"), local('NotoSerifJP-Bold');
  font-weight: 700;
}

これで

body {
  font-family: 'NotoSerifJP-local', 'Noto Serif JP', serif;
}
h1, h2, h3, h4, h5, h6, em, strong {
  font-family: 'NotoSansJP-local', 'Noto Sans JP', sans-serif;
}

などとしておけば，ローカルの Noto 和文フォントを優先的に見てくれる。なお，欧文 Noto フォントの CSS は既にローカルのフォントを優先的に見るよう設定されている。

早く Noto Serif JP が CDN 配信されるようにならないかな。

ブックマーク

CSS の font-weight に設定する数値。 font-weight の normal が 400 に相当する。ちなみに bold は 700。 bolder で 400 → 700 → 900 と太くなる。 lighter だと 400 → 100 と細くなる。 ↩︎