Webフォントの使い方 【 例：はんなり明朝 】

ここ「魔ッドアングラー」のようなブログやWebサイト上で使われている文字は「タイトルにはこのフォントを使う」とか「記事本文にはこのフォントを使う」といった具合に、作成者の好みで色々なフォントが指定されています。

フォントには多くの種類が存在するのですが、サイトの作成者側が＜特定のフォント＞を指定しても読む側のデバイス(PCでもスマホでもiPadでも、というよりOSの問題なのでWindowsでもMacOSでもAndroidでもその他なんでも)の中に指定された＜特定のフォント＞があらかじめインストールされていないと文字に変化は起こりません。

仮に私がメチャクチャかっこいいフォントを持って(自分のPCにインストールして)いて、自分のブログ全体にそのフォントを使いまくったとしても読んでもらえる側のデバイスに同じフォントが入っていないと表示されず、標準的なフォントに勝手に変換されてしまうわけです。

そういったわけで通常はあまり変わったフォントは使用されません。多くのサイトは各OSに標準で入っているフォント、かつ、その中でも綺麗で読みやすいとされるフォントを下記のようなかんじで指定しています。

font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif, ;

「font-family」というCSSのタグは、指定されているフォントを前から順番に採用していきます。

上記の場合、まず「ヒラギノ角ゴ」というフォントが読む側のデバイスにあるかを探し、あるのであればそのまま「ヒラギノ角ゴ」で表現します。余談ですが「ヒラギノ角ゴシック体」の略です。

続いて「ヒラギノ角ゴ」が読む側のデバイスに無ければ、次の「Hiragino~略」を探しに行きます。1番目の「ヒラギノ角ゴ」と2番目の「Hiragino～略」は日本語と英語の違いだけのまったく同じ「ヒラギノ角ゴ」というフォントなのですが、読み取るデバイスによっては日本語名のフォントを読み取らない事があるので、念のため2種類記述しておきます。続くメイリオも同じ理由です。

AppleのOSで代表的な「ヒラギノ角ゴ」、Windowsで人気の「メイリオ」。大体この2つを書いておけば事足ります。
あとはこのブログのタイトルで使っているような明朝体が使われることもあります。

Webフォントとは、上記のような＜読み手の持っているフォントに依存する＞という制限を抜け出し＜読ませたいフォント自体をサーバから直接読み込ませる＞ことで、読み手がどのような環境であろうとも書き手の指定したフォントで表現することができるという非常に素敵な仕組みです。

そして導入方法は思っているよりもきっとずっと簡単です。

この3ステップです。

まずは、使いたいフォントを入手しましょう。

日本語のフリーフォントは文字数が多く大変なせいか余り無いのですが、それでも探せばいくつかはあります。
今回はハイクオリティでありながら商用フリーという「はんなり明朝」を使わせて頂きました。

※ ご使用の際はリンク先、またはDownloadしたフォルダの中にあるIPAフォントライセンスをご確認ください

リンク先から「はんなり明朝」をDownloadし、zipを解凍するとフォルダの中に「Hannari.otf」というファイルがあります。拡張子「.otf」とは「Open Type Font」の略だそうです。

いきなりですが、ここで1つ大きな問題が発生します。
「.otf」タイプのフォントは「読み込めるブラウザ」と「読み込めないブラウザ」が存在するというのです。

ざっくり言うと「.otf」形式では InternetExplore に対応できません。
IEに対応するために必要な形式は「.eot」なのです。なお、「Embedded Open Type」の略だそうです。

現存する全てのブラウザに対応できるというわけではないのですが「.otf」と「.eot」の2つで大体カバーできると踏んで、今回はこの2つを用意して進めていきます。

現時点では「.otf」のファイルしか無いのにどうすればいいんだ？と思いがちですが大丈夫です。
「.otf」ファイルを変換してくれるサイトがありますので、そちらを利用します。

ちょっと面倒なのですが「.otf」から「.eot」の一発変換は簡単にはできません。
検索をすればフォントタイプを変換できるサイトはたくさん出てくるのですが、前述したように日本語のフォントには平仮名・カタカナ・漢字などがあるため容量がどうしても大きくなってしまい、ほぼ全ての変換してくれるサイトのアップロード制限に引っ掛かってしまうのです。

そこで、「.otf」 → 「.ttf」 → 「.eot」として、間に「.ttf」ファイル(TrueType Font)を経由します。

以下にご紹介するのが「.otf」から「.ttf」に変換できるサイトです。

リンク先に文字化けしている箇所↓がありますが「アップロード」ボタンです。

ここをクリックして Download しておいた「Hannari.otf」をアップロードします。
アップロードが終わったら、今度は出力先に「ttf」を選んで＜変換する＞をクリックします。

変換には数秒かかりますのでのんびり待ちましょう。終了するとこうなります。

オレンジボタンのリンクから「hannari.ttf」をDownloadします。

以前は「.ttf」から「.eot」に変換してくれる「ttf2eot」というサイトがあったのですが、諸事情あるらしく2014年の年末に閉鎖してしまったようです。リンク先では作者さんが対応策をいくつか紹介してくれています。

その中にある「WEB FONT GENERATOR」というサイトで「.otf」から「.eot」へ一発変換ができそうなのですが、出来上がって落ちてくるファイルのサイズがどう見ても小さいため上手く変換ができていないような感じです。

再配布を行わない個人利用での改変は認められてるのですが、「拡張子を変更したフォントファイルの再配布」に関しては同じファイル名で違う拡張子のファイルがネット上で配布されると混乱を招くという見地から推奨されていません。ですので私の手持ちの「.eot」ファイルを配布するわけにもいかず困ってしまいました。

ひとまず「.otf」だけでも使ってみますか。

いずれ変換方法を見つけるとして、以下は2つのファイルがある前提で書いております。
状況に合わせてご変更下さい。

まずは「otfファイル」と「eotファイル」をサーバにアップロードしましょう。

せっかく作った「.ttf」ですが、「.otf」とサポートしているブラウザが同じなので使いません。
私の場合、テーマのディレクトリの中に「font」というフォルダを(無かったので)新たに作り、その中にアップロードしました。場所には特に決まりもないので、好きな所で良いと思います。

スタイルシートに以下を例に記入します。記入場所はスタイルシートの上部の方が良いので、私は冒頭に数行ある「テーマ情報」のすぐあとに記入しました。

/*Webフォント*/
@font-face {
  font-family: 'hannari';
  src: url(./font/hannari.eot) format('embedded-opentype');
  src: url(./font/hannari.otf) format('opentype'); 
  src: local('hannari Regular'), local('hannari');
}

3行目：ここで指定した名称が font-family で指定する時の名称です。ここでは hannari としておきました。
4行目：url(　)　の括弧内に「eotファイル」の場所を記入します。ファイルフォーマットを指定しておきます。
5行目：url(　)　の括弧内に「otfファイル」の場所を記入します。ファイルフォーマットを指定しておきます。

6行目：
ローカル、つまり「読む側のOSにこのフォントがすでに入っていればそちらを使います」という意味だと思います。
ですのでここを記入するのであればフォント名を入れてください。しかし、Webフォントをなぜ使うのかを考えると読み手側に同じフォントがあるとは考えにくいので、この5行目は記入しなくても問題無いと思います。

私の場合、ローカルの記述はとっぱらって以下のようにしておきました。

/*Webフォント*/
@font-face {
  font-family: 'hannari';
  src: url(./font/hannari.eot) format('embedded-opentype'),
       url(./font/hannari.otf) format('opentype');
}

あとは「font-family」で適用したい箇所・要素に指定してあげるだけです。

明朝体は大きい方が違いがわかりやすいと思いますので、ひとまず文字を大きくしてみます。
例として「.example」というclassを用意し、スタイルを指定してみました。

.example {
	font-size: 3em;
}

はんなりしてない魔ッドアングラー

「はんなりしてない魔ッドアングラー」という文字のサイズを3emにしてみました。
3emは文字の大きさを3倍にするという指定です。

続いて「はんなり明朝」に変えてみます。

.example {
	font-size: 3em;
	font-family: 'hannari';
}

はんなり明朝の魔ッドアングラー

どうでしょうか？
これを御覧頂いている皆さんのデバイスに「はんなり明朝の魔ッドアングラー」が明朝体で表示されていればWebフォントの導入は完了です。

※IEでは正しく表示されない場合があります。