帰ってきた「しっぽのさきっちょ」

しっぽのさきっちょ: 2016-10-16 付 (2017-01-12 更新)

Web フォントに関する覚え書き(明朝体編)

no extension

以前,ここで使っている Web フォントの話を書いた。 実は今まで日本語の Serif (明朝体)フォントがどうにも気に食わなかったのだが,最近 Google の Early Access のページを見たら随分と日本語の書体が増えている気がする。

この中から “Japanese” に分類されているものを挙げてみる。(10月16日時点)

このうち Hannari, Kokoro, Sawarabi Mincho が Serif 相当の書体になる。 それぞれの見本をみて,私は Sawarabi Mincho を選択した。

さわらびフォントは明朝体ではまだ第一水準漢字も網羅されていないが,とりあえず鼻の先は問題なさそうである2。 Sawarabi Mincho を導入するには CSS で以下のようにインポートする。

@import url(http://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

あるいは各ページのヘッダ部分で

<link rel='stylesheet' href='http://fonts.googleapis.com/earlyaccess/sawarabimincho.css' type='text/css'>

としてもよい。 この CSS ファイルの中身は以下のようになっていて

/*
 * Sawarabi Mincho (Japanese) https://fonts.google.com/earlyaccess
 */
@font-face {
  font-family: 'Sawarabi Mincho';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot);
  src: url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/sawarabimincho/v1/SawarabiMincho-Regular.ttf) format('truetype');
}

Sawarabi Mincho を指定するには

body {
  font-family: 'Noto Serif', 'Sawarabi Mincho', serif;
  font-weight: 400; /* normal */
}

とすればいいことが分かる。 ウェイトが1種類しかないが,明朝体を太字で表示することは多分ないので,これで OK。

Web フォントを Google のようなところから取得するのはメリットがある。 一度ダウンロードした Web フォントはブラウザ内でキャッシュされるため,みんなが同じ場所にあるフォントを使えばネット全体で通信量を減らすことができるからだ。

本当は Noto Serif で日本語をサポートしてくれると嬉しいんだけどねぇ。 でもフォントの制作は時間とお金と人手がかかる仕事だし,ただ成果を享受している身としてはワガママは言えません。


  1. Noto Sans JP は Noto Sans Japanese から 350 のウェイトを削除しているらしい。アホなブラウザが 350 という値をうまくハンドリングできないからだそうな。まぁ文章の中で使うだけなら多くても 400 と 700 のふたつがあれば充分なのでこれで問題ないし,ダウンロードサイズが小さくなるのも魅力である。 [return]
  2. 本当はこころ明朝体にしたかったのだが,どうもひらがなとカタカナしかサポートしていないらしい。最初こころ明朝体にしてみて,ケータイでの表示が大変なことになったので引っ込めた。 [return]