ワードプレスで日本語Webフォントを適用してみよう！

ワードプレス(WordPress)でホームページを作ったとき一番の問題は日本語のフォントの問題です。もちろん、フォントに気をあまり使わない人なら大丈夫かもしれませんが、僕のようにフォントに敏感な人々はたまらないはずです。ここでは、font faceを用いて簡単な方法で日本語フォントを変更する方法を紹介します。

1. 日本語フォントの準備

まず最初にすべきことはフォントを用意することです。フォントの姿も重要な問題ですが、もっとも重要なものはフォントファイルのサイズです。Webでは速度速くなければならないですから、ファイルのサイズが小さいフォントがいいです。自分のサーバーからダウンロードする予定なら1.0MB以下が適当です（ひらがなとカタカナだけのフォントはもちろん10kBぐらいのフォントもたくさんあります）。僕が推薦するフォントはM+ 1p regular フォントです。フォントのホームページはこちらですが、こちらで無料ダウンロードができます。Licenseもフリーですので安心しましょう。

2. TTFフォントをWOFFフォントへ変換

上記サイトでダウンロードしたフォントはmplus-1p-regular.ttfです。でもこのTTFタイプのフォントはサイズも大きいですし、Internet Explorerでは動作しないかもしれません。ですからこのTTFフォントをWOFFタイプへ圧縮しなければならないです。圧縮は下記のサイト

http://everythingfonts.com/ttf-to-woff

で易しくできます。そうすると1.3MBのmplus-1p-regular.ttfが800kBのmplus-1p-regular.woffになります。

3. 自分のサーバーにフォントをアップロード

mplus-1p-regular.woffフォントを自分のサーバーの適当な位置(一般的にはRoot)へアップロードします。

4. CSS 編集

自分のホームページのスタイルを担当するstyle.cssを開けてもっとも上段の部分に

@font-face{
     font-family: mplus-1p-regular; 
     src: url('/mplus-1p-regular.woff'); 
     format('woff');}

のようにコードを追加します。また、例えば

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
      font-family: mplus-1p-regular, sans-serif;
      font-size:100%; 
      font-style:inherit; 
      font-weight:inherit;
}

のようにfont-familyでmplus-1p-regularを指定しておきます。これで終わりました。もちろんお金を投資するとこれより小さくて綺麗なフォントを求めることができるかもしれませんよ。