Web フォントに関する覚え書き

このサイトの Web フォントまわりを整理したので，覚え書きとして残しておく。

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

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

なのでこの記事はもう有用ではないが「こんな時代もあったよね」って感じで残しておく。

Google Noto Fonts

このサイトの Web フォントを Google Noto Fonts で統一した¹。

Google Noto Fonts は以下のサイトで取得できる。

Google Fonts

このサイトでは様々なフォントが選べるが “Noto” をキーワードに以下のフォントを選択する。

Noto Sans : Normal 400, Bold 700
Noto Serif : Normal 400, Bold 700

またサブセットとして Latin を選択する。これで，以下に示す書式で CSS ファイルを HTML の head 要素内に指定すればよい²。

<link href='//fonts.googleapis.com/css?family=Noto+Sans:400,700|Noto+Serif:400,700' rel='stylesheet' type='text/css'>

Bold が不要であればもっと軽くできる³。

<link href='//fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif' rel='stylesheet' type='text/css'>

CSS でフォントを指定する際は "Noto Sans" や "Noto Serif" で指定する。

body {
  font-family: 'Noto Serif', serif;
  font-weight: 400; /* normal */
  font-variant: normal;
  font-style: normal;
  font-size: medium;
  line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400; /* normal */
  font-variant: inherit;
  font-style: inherit;
  font-size: inherit;
}

Noto Sans Japanese

2014年， Noto Sans に Noto Sans CJK が加わった。

Noto Sans CJK を Web フォントとして使用するなら以下のサイトが参考になる。

Google Fonts : Early Access

日本語であれば “Noto Sans JP を導入すればよい⁴。

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

フォント名は "Noto Sans JP" で指定する。

body {
  font-family: 'Noto Serif', serif;
  font-weight: 400; /* normal */
  font-variant: normal;
  font-style: normal;
  font-size: medium;
  line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400; /* normal */
  font-variant: inherit;
  font-style: inherit;
  font-size: inherit;
}

Noto Sans JP では JIS X 0208 の文字集合を収録しているため， JIS X 0213 第3第4水準漢字はサポートされていない模様。これらの漢字が必要な場合は Noto Sans CJK の日本語フルセットが必要となる。

Inconsolata

プログラム・コードの表示用に Inconsolata を導入する。 Inconsolata は Google Fonts を使って導入可能。最終的に Google Fonts の書式は以下のようになる。

<link href='//fonts.googleapis.com/css?family=Noto+Serif|Noto+Sans|Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'>

また CSS の記述は以下のようになる。

body {
  font-family: 'Noto Serif', serif;
  font-weight: 400; /* normal */
  font-variant: normal;
  font-style: normal;
  font-size: medium;
  line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, address, table th, dl > dt, em, strong, cite {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400; /* normal */
  font-variant: inherit;
  font-style: inherit;
  font-size: inherit;
}
pre, tt, code, var, kbd, samp {
  font-family: 'Inconsolata', 'Noto Sans JP', monospace;
  font-weight: 400; /* normal */
  font-variant: inherit;
  font-style: inherit;
  font-size: inherit;
}

Noto Serif Japanese が欲しい！

残念ながら，現時点では Noto Serif の日本語フォントは存在しない。有料で明朝体 Web フォントを提供してくれるサービスはあるが，デザイン重視のサイトならともかく，うちのようにただ文字が多いだけのサイトでは「お金を払ってまでねぇ」という感じ。そこで，いくつかオープンなフォントを探してみる。

IPA 明朝

IPAexフォント/IPAフォント | IPAフォントのダウンロードサイトです

オープンなフォントといえば IPA フォントだよね。 OSD (Open Source Definition) に準拠したライセンスで提供されているため扱いやすい⁵。

ただし IPA フォントは PDF 文書のようなものには向いてるけど， Web フォントには向いていない。理由は以下の2つ。

全体的に線が細く表示環境によっては文字がかすれてしまう。ウェイトが1種類しかないのもマイナスポイント
JIS X 0213 の文字集合を全て収録しているのはいいが，データサイズが大きくなってしまう。第1第2水準漢字のみのサブセットがあればいいのに

あおぞら明朝

あおぞら明朝フォント

IPA 明朝（厳密には IPA P明朝）からの fork で，7ウェイトをサポートしているのが特徴。ライセンスも IPA フォントライセンスを継承している。欠点は以下のとおり。

ベースがプロポーショナル・フォントなので見た目が詰まった感じになってしまう
IPA フォントと同じく JIS X 0213 の文字集合を全て収録しているのはいいが，データサイズが大きくなってしまう

やさしさアンチック

フリーフォントやさしさアンチック（漫画用書体・セリフフォント）のダウンロード | フォントな。無料日本語フリーフォント

アンチック体あるいは「アンチゴチ」と呼ばれる書体で，漢字はゴシック体，かな文字等は明朝体で表現されるのが特徴。 IPA フォントおよび M+ フォントがベースになっているため，ライセンスもこれらに準拠する形になっている。

見出しや短文に向いている。長文はちょっとしんどいか。第1第2水準漢字までをサポートしており，サイズ的にも手頃といえる。

もう WOFF でいいじゃない

複製・再配布が自由なフォントであれば WOFF (Web Open Font Format) に変換⁶ して Web フォントとして利用可能。 WOFF への変換には，以下のツールが使える。

WOFFコンバータ（武蔵システム）

作成した WOFF ファイルを使って CSS 内に @font-face を定義する。

@font-face{
    font-family: 'aozora-m';
    src: local('AozoraMinchoMedium'), url('/fonts/AozoraMinchoMedium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

これで定義したフォント名 "aozora-m" を使って CSS に記述することができる。

body {
  font-family: 'Noto Serif', "aozora-m", serif;
  font-weight: 400; /* normal */
  font-variant: normal;
  font-style: normal;
  font-size: medium;
  line-height: 1.4;
}

Web フォントの形式はいくつかあるが，少なくとも Modern browser であれば WOFF をサポートしている。 IE のことは忘れましょう（笑）

その他の Web フォント

Google Noto Fonts 以外で利用しているフォントを列挙しておく。

Font Awesome

Font Awesome は 5 系がリリースされ， SVG と JavaScript によるアイコン表示と制御がサポートされた。詳しくは以下の記事を参照のこと。

Font Awesome 5 がリリースされた

Creative Commons Icon Font

なお Font Awesome では 5.0.11 以降から CC Licenses のアイコンは対応している。

Font Awesome 5.0.11 で Creative Commons アイコンに完全対応した

ブラボー！