自分のブログでWebフォントを使えるように設定してみる

前回は Web フォントについて調べて、ライセンス問題に悩みながらも使うフォントを決めました。ここまでで力尽きて、だいぶ長いこと放置していたのは内緒です、@azur256 です。

第2回目の今回は Rounded M+ という Web フォントを使ってブログの表示を変更してみたいと思います。

Web フォントを使うように指定するのは簡単

Web フォントを使えるようにするためには、大きく2つのことをしてあげる必要があります。1つは Web サーバへの Web フォントの配置、もう一つはブログでの Web フォントの指定です。

Web サーバへの Web フォントの配置

Web フォントを使えるようにするには、Web サーバからダウンロードできるようにファイルを配置する必要があります。今回は、Rounded M+ を使うことにしましたので、 Rounded M+ の次の 4 つのファイルを Web サーバ上に配置します。

rounded-mplus-1c-medium.eot
rounded-mplus-1c-medium.ttf
rounded-mplus-1c-medium.woff
rounded-mplus-1c-medium.ttf.gz

rounded-mplus-1c-medium.ttf.gz というファイルはオリジナルの Rounded M+ には含まれていませんが次回の高速化設定で使うので、必要に応じて配置してください。
このファイルは、Mac の場合、ターミナルを開いて以下のコマンドを使うことで作ることができますので、作成して一緒に配置しておいてください。

gzip -k rounded-mplus-1c-medium.ttf

次に、これらのファイルがフォントファイルであることを Web サーバに教えてあげるための設定をします。Web サーバ上の .htaccess を開いて編集します(他の方法もありますが、ここでは割愛します)。
以下の指定を追記してください。

<IfModule mod_mime.c>
AddType font/eot              .eot
AddType font/truetype         .ttf
AddType application/font-woff .woff
</IfModule>

AddType font/eot .eot

AddType font/truetype .ttf

AddType application/font-woff .woff

</IfModule>

これらは、ファイルの拡張子が eot、ttf、woff の場合は Web フォントだとブラウザに通知するための設定です。これを書くことでブラウザはフォントとして扱ってくれるようになります。

以上で、Web フォントとして使うことができるようになりました。

ブログでの Web フォントの指定

Web フォントの設定が終わったら、次はブログの中で使うわけですが、フォントの定義とその定義をスタイルで指定するだけです。

フォントの定義は、子テーマなどのスタイルシートに次のように書きます。

@font-face {
  font-family: 'rounded-mplus-1c-m';
  src: url('/data/webfont/rounded-mplus-1c-medium.eot');
  src: url('/data/webfont/rounded-mplus-1c-medium.eot?#iefix') format('embedded-opentype'),
       url('/data/webfont/rounded-mplus-1c-medium.woff') format('woff'),
       url('/data/webfont/rounded-mplus-1c-medium.ttf')  format('truetype');
}

@font-face {

font-family: 'rounded-mplus-1c-m';

src: url('/data/webfont/rounded-mplus-1c-medium.eot');

src: url('/data/webfont/rounded-mplus-1c-medium.eot?#iefix') format('embedded-opentype'),

url('/data/webfont/rounded-mplus-1c-medium.woff') format('woff'),

url('/data/webfont/rounded-mplus-1c-medium.ttf') format('truetype');

}

同じような指定が続いているのは、Web フォントで使えるフォントフォーマットがブラウザによってバラバラなので、より多くのブラウザで Web フォントで表示できるようにするためです。万一、Web フォントが適用できないブラウザの場合には、標準のフォントで表示されます。

今回は、このフォント定義で font-family として “rounded-mplus-1c-m” という名前をつけました。
このフォントの定義が終わったら、次は津タイルにこの font-family を指定してください。

どこに指定するかは皆さんのスタイル次第です。私は次の2ヶ所に設定しました。

h3.entry-title-ac a {
  font-family:'rounded-mplus-1c-m','Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  font-weight: normal;
}

h1.entry-title {
  font-family:'rounded-mplus-1c-m','Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  font-weight: normal;
}