Webフォントを使ってみる(2016年版)

HTML・CSS

ここ最近、古い IE のサポートが公式に終了するなど、
対応ブラウザに大きな変化がありましたので調べなおしてみました。

［参照］2012.03.15「Webフォントを使ってみる」Tips Note
https://www.tam-tam.co.jp/tipsnote/html_css/post59.html

［目次］
■まずは、Webフォントについておさらい
 ■かんたん！らくらく設定版
 ■ダウンロード版
 ■おまけ（フォント周りの調整）

まずは、Webフォントについておさらい

【メリット】
・ユーザーの環境に依存せず、インストールされていないフォントも表示できる。
・画像ではなくテキストなので、検索エンジンのクローラーに情報を拾ってもらえる。（SEO的に有利）
・修正、更新が簡単。（いちいちPhotoshopなどを起動しなくていい！）

【デメリット】
・Webフォントのデータを読み込むための時間がかかってしまう。
・無料の日本語Webフォントは種類が少ない。
・日本語Webフォントはとても重い。
※容量を削減するために、必要な文字のみを読み込むこと（サブセット化）で軽量化することもできます。

【注意事項】
・利用規約を必ずご確認ください！！　※著作権の問題
（「個人サイトは無料でも、商用サイトは有料」「一定のPVを超えると有料」など、使用範囲が決められている場合があります。）

かんたん！らくらく設定版

【「Google Fonts」の場合】
必要なフォントを選んで、出力されたタグをコピペするだけ！

↓↓↓

　
【記述例】　Google Fonts「Noto Serif」（標準、太字）を設定する場合

＜HTML＞ head 内に追加

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

＜CSS＞

body {
   font-family: 'Noto Serif', serif;
 font-weight: 400; /* normal */
}
h1 {
 font-weight: 700; /* bold */
}

※「serif」は、指定したWebフォントが表示できなかった際に『ユーザの環境にあるフォントの内、同じ系列の書体（この場合はセリフ体）を表示する』という設定（＝保険）です。
※Android では、ほとんどの機種で明朝体のフォントが搭載されていないため、「serif」を設定してもゴシック体または丸ゴシック体になります。

＜デモ＞
Webフォント表示サンプル
（サンプルには、下記で紹介しています「カーニング」も含んでいます。）

ダウンロード版

【このような場合に】
・ローカルでも動作確認をしたい。
・「外部サーバからのリンクが使えない」など、特殊な状況。

【設定方法】
1.Webフォントをダウンロードする

↓↓↓

　
2.必要なファイル形式に変換（コンバート）する
※対象ブラウザが「IE 9」以上、「Android 4.4」以上であれば、「WOFF」だけで大丈夫です。

【ジェネレーターで一括変換】
［参照］Create Your Own @font-face Kits | Font Squirrel
http://www.fontsquirrel.com/tools/webfont-generator

右側のラジオボタン「EXPERT...」をクリックすると、詳細設定が表示されます。
各種形式に対応していますので、必要な形式を選択して、一度にコンバートすることができます。

【ファイル形式について】
・EOT（IE 6～8）　※必要な場合のみ
・TTF（～Android 4.3）　※必要な場合のみ
・WOFF（IE 9～、Android 4.4～）
・WOFF2（Firefox、Chrome、Opera、Android 5～のみ対応）　※必要な場合のみ
　
3.フォルダへ格納する
（以下の記述例では、ルート直下の「fonts」フォルダへ格納。）

4.CSS で「@font-face」、「font-family」を指定する

【記述例】

@font-face {
  font-family: '（フォント名）';
  src: url(/fonts/sample.woff);
}
body {
   font-family: '（フォント名）';
}

おまけ（フォント周りの調整）

特に設定しなくても問題はありませんが、フォントをより美しく表示するための調整方法です。
　

【メトリクスカーニング】
文字間が大きく空いてしまう “特定の文字の組み合わせ” を
いいカンジに詰めてくれます。（※ IE 10 以降対応）

.auto {
  font-kerning: auto; /* ブラウザの設定（※ブラウザによって若干差異あり） */
}
.normal {
  font-kerning: normal; /* カーニングを適用 */
}
.none {
  font-kerning: none; /* カーニングを適用しない */
}

　
【均等割り付け】
長い文章の右端をきれいに整えてくれる設定です。

body {
    text-align: justify;
    text-justify: inter-ideograph; /* IE のみ、こちらも必要 */
}

［参照］
・CSSで均等割り付けを実現する方法 - はらへり日記
 http://sota1235.hatenablog.com/entry/2015/05/31/183211

　
【アンチエイリアス】
Mac の一部ブラウザでしか対応していませんが（※Windowsは非対応）、
より美しさを求める場合や、LPなど短期間でしか公開しない場合にはよいかもしれません。

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

［参照］
・[CSS] フォントのアンチエイリアス設定 | metrograph.jp
http://metrograph.jp/css-font-smoothing/

　
　
「Google Fonts」以外にも、無料日本語フォント「M+ FONTS」（2015年紅白の弾幕で使われていた）や、
「Adobe Creative Cloud」のユーザであれば「Typekit」でモリサワのフォントが使えるなど、たくさんのサービスがあります。
ぜひお好みの Webフォントを探してみてくださいね！