ソーシャルアイコンを画像ではなくWebフォントで表示する際の備忘録

Webフォントはクライアントにインストールされていないフォントも表示してくれるという優れもの。
サイトの表現の幅が広がるし画像を使うわけではないのでSEO的にもいいのかな。
SNSのアイコンもWebフォントにするとマウスをのせた後の処理などもしやすい。
導入も簡単。ん？簡単？？？
いや、難しかったっすｗ
ってことで知ってる人には簡単だと思うけれど、私には敷居が高かったので備忘録として。

AGENDA

Webフォントって？
Webフォントの使い方
Webフォントのダウンロード
Webフォントのアップロード
実際に表示させてみるための準備
Firefoxだけ表示されない

1. まずWebフォントって？

Webフォントを使う際におさえておきたい5つのポイント – フォントブログ

意外と知らない？アイコンはWebフォントでつくるとこんなに便利！ | KAYAC DESIGNER’S BLOG – デザインやマークアップの話

上記の2つの記事でWebフォントの存在を知りました。
で、俄然興味を持ったのでWordPressテーマを自作する際に導入してみようかと。
テーマを変更する時が最も導入しやすいとかって記事も拝見したので。
個人的には以下のことが琴線に触れました。

クライアントにインストールされていないフォントが表示できる
画像を使わないテキストデータのためファイルサイズが小さいまま
テキストの装飾はCSS3で行うので様々な装飾ができる

2. Webフォントの使い方

こちらは私のブログのタイトル部分。
harutomo-ryu.com の部分は「Google Web フォント」なので後に別にエントリーしたいかな、と。
今回はソーシャルアイコンをWebフォントで表示する方法を書いています。
ちなみにアイコン部分はそれぞれのサービスへのリンク先。
これをどのように設定したかを述べてゆきます。

使いたいWebフォントファイルをダウンロード
Webフォントファイルをアップロード
style.css に@font-face でフォントファイルを定義
フォントを表示させたい部分にコードを書き込む

こんな流れになります。

3. Webフォントのダウンロード

Web Icon Fonts | chibatch.jp

自分のサイトで使わせていただいているアイコンの作者さんの配布ページ。
このページを見て絶対使いたい！って思いました。
以下こちらのWebフォントを使用させていただく流れで書いてゆきます。
ちなみに「OFL」というのは「Open Font License」。
作者様ありがとうございます。

上記サイトから「Web Icon Fonts」のダウンロードファイルは以下。

これらのファイルをサーバー等にアップロードして使用することになります。

4. Webフォントのアップロード

3.でダウンロードしたファイルをサイトが表示された際に常に読み込むことでWebフォントは表示されます。
なので上記ファイルをWeb上のどこかにアップロードします。
基本的には自分のサーバーやレンタルサーバーにアップロードすることになると思いますが私はオンラインストレージサービスの共有フォルダにアップロードしました。

SugarSyncで共有フォルダを作成してそこにアップロードしました。
理由はレンタルサーバーをそのうち変更する可能性があるので後々面倒じゃないようにってことで。
この際、共有フォルダでのアップですがフォルダを一般に公開してしまうと再配布に繋がりますので自分だけへの共有としています。
ライセンスはきちんと自分で確認してフォントを使用しましょう。

5. 実際に表示させてみるための準備

ここまででWebフォントの材料（各ブラウザで表示させるためのファイル）は揃いました。
ここからはサイトに表示させるための準備となります。
具体的には style.css への記述とサイト内で表示させたい場所へのHTMLの記述となります。

style.cssへの記載はフォント配布ページに載っている以下のコードをアレンジすることになります。
[html]
@font-face{
font-family: ‘WebIconFonts’;
src: url(‘webiconfonts.eot’);
src: url(‘WebIconFonts.eot?’) format(‘eot’),
url(‘WebIconFonts.woff’) format(‘woff’),
url(‘WebIconFonts.ttf’) format(‘truetype’);
}

.icon {
font-family: WebIconFonts;
}

[/html]

上記のコードを自分の状況にあわせて書き換えましょう。。

[html]
@font-face {
font-family: ‘任意の名前を付けるここでは「WebIconFonts」’;
src: url(‘ここにeotファイルのある場所のURLを記載/WebIconFonts.eot?’);
src: url(‘ここにeotファイルのある場所のURLを記載/WebIconFonts.eot?’) format(‘eot’),
url(‘ここにwoffファイルのある場所のURLを記載/WebIconFonts.woff’) format(‘woff’),
url(‘ここにttfファイルのある場所のURLを記載/WebIconFonts.ttf’) format(‘truetype’);
url(‘ここにsvgファイルのある場所のURLを記載/WebIconFonts.svg#WebIconFonts’) format(‘svg’);
}

p.feed {
font-family: WebIconFonts;
}

[/html]
上記のようにURLを記載して表示します。
ここではRSSフィードのアイコンをWebアイコンとして読み込むようにしています。
上記の p.feed 部分に指定したWebフォントで表示するということです。
p.feed は以下のようにヘッダー直後の body 内に直接書き込んでいます。

[html]

以上でWebフォントが使用できるようになります。

6. Firefoxだけ表示されない orz

FirefoxだけWebフォントが表示されないんですよ。

で、いろいろ調べてみたらこんな記事が。

Firefox と Thunderbird の Mac OS X 10.7 Lion 対応状況 | Mozilla Japan ブログ

Mac OsX Lionだと表示されないと書いてありました。
ただ我が家のもう1台のMac（SnowLeopard）のFirefoxで試してみたんですが表示されなかったんですよ orz
これはちょっと私では原因がわかりませんでした、すいません。
教えていただける方はぜひぜひ教えてください、お願いします。
ほんといろいろ難しいな〜って思いながらいろいろ試していきたいなと。
中途半端な内容ですみませんがFirefoxでの表示をなんとかしたいよ〜ってことが実は一番言いたいことだったりします。
やっぱいろいろ難しいっす〜