@font-faceで読み込んだWebフォントにRegular, Boldを対応させる

ubuntu-font

最近よくWebフォントを利用して好みのフォントを使っているブログを見かけるので、このブログでも試してみました。実際フォントを変えてブログの印象が一気に変わりました。使用したフォントは最近毎日お世話になっていますUbuntuのフォント!

Ubuntuフォントをダウンロード

以下からダウンロードできます。EC2や仮想環境での開発はもちろんですがフォントまでお世話になるとは思いませんでした。Ubuntuにはしばらくはお世話になりそうです。

Ubuntu Font Family

Ubuntuフォントを表示させる

手順は以下の通りです。

  1. RegularとBoldのフォントを準備
  2. WordPressディレクトリにフォントファイルをコピー
  3. CSS編集

1. RegularとBoldのフォントを準備

ダウンロードするとたくさんフォントがありますが、今回は普通にUbuntu Regularフォント(Ubuntu-R.ttf)とUbuntu Boldフォント(Ubuntu-B.ttf)を表示させることにしました。

2. WordPressディレクトリにフォントファイルをコピー

テーマフォルダ直下などにコピー

3. CSS編集

以下のようにCSSに追加します。

@font-face {
  font-family: 'Ubuntu';
  src: url(/wp-content/themes/tactosh/Ubuntu-R.ttf);
  font-weight: normal;
}
@font-face {
  font-family: 'Ubuntu';
  src: url(/wp-content/themes/tactosh/Ubuntu-B.ttf);
  font-weight: bold;
}

font-familyプロパティでRegularもBoldも同じ名前でフォント定義してfont-weightでweightを決めてやると対応したフォントファイルが読み込まれます。
後はいつも通りに

h1 {
  font-family: 'Ubuntu';
  font-weight: bold;
}

といった具合にフォント指定してあげればOKです。

追記:2013/12/23

フォントの種類をttfからwoffに変更しました。
woffはWebで表示されることを目的としたフォーマットでファイルサイズが圧縮されているので、ページ読み込みの負担を減らすことが出来ます。

ttfからwoffへの変換は以下のアプリで行いました。ググってスグ出るのです。

WOFFコンバータ

拡張子が変わるだけなので、CSSのfont-face部分の拡張子部分を変更してあげるだけです。

@font-face {
  font-family: 'Ubuntu';
  src: url(/wp-content/themes/tactosh/Ubuntu-R.woff);
  font-weight: normal;
}
@font-face {
  font-family: 'Ubuntu';
  src: url(/wp-content/themes/tactosh/Ubuntu-B.woff);
  font-weight: bold;
}