このサイトを開設して1年を期に、サイトのデザインをしれっと更新しました。
年始の抱負の記事でも宣言したとおりWeb系の記事を書きたかったので、今回のデザイン変更で実装した技術まわりを記事に起こしていきます。
まずは第1回目となる今回、「ウェブフォント」について。

webfont3

ウェブフォントってなんだわさ

ウェブサイトの文字は、閲覧する人のPCにインストールされているものを使います。
MacやiPhoneなら「ヒラギノ角ゴ」、Windowsなら「メイリオ」とか「MS ゴシック」とか。
当然、インストールされていないフォントは指定しても表示できません。だから凝ったフォントで見出しをつくろうと思ったら画像にするほかになかったわけです。

でも、サーバーにフォントを置いてページと一緒に読み込んでしまえば、手持ちにないフォントも表示できるよね。っていうのがウェブフォントの基本的な考えです。
また、小さなアイコンもフォントにしてしまうテクニックも徐々に普及してきています。

ウェブフォントを使うメリット

・画像じゃなくテキストなので、文の再編集が容易
・画像じゃなくテキストなので、検索に引っかかる
・ベクトルデータなので、拡大してもキレイ
・アイコン画像も「1文字」で再現できる
・凝った見栄えもらくらく実装できる

ガンガン使えるというわけでもない

メリットが多いからジャンジャン使おう!と行きたいところ。
でも、いくつかの障壁、問題点を理解しておく必要があります。

ウェブフォントのデメリットと障壁

・日本語フォントはデータ量が大きい(2MB~5MB)
・フォントデータを読み込むまで、文字が表示できない
・サーバーにフォント置くため、ライセンス的に利用できる種類が限られる
・どう足掻いてもWindowsのフォント表示は汚い(´・ω・`)
・視認性の悪いフォントはストレスの元

上から順に見ていくと、まずデータ量がネックになります。
アルファベットのみならまだしも、「ひらがな・カタカナ・漢字」を扱う日本語フォントはどうしてもデータサイズが大きくなります。ものによっては5MB超にもなるデータは、いくら高速回線が普及してるといえども喜ばれるものではありません。

次にライセンス
自分のサーバー上にフォントのコピーを置くことになるので、いわば「再配布が可能な状態」にしていることになります。有料で購入するフォントはまず利用できません。
当サイト(ラフクリ!)では、
フロップデザインさんの「フロップデザインフォント」をご許可を頂いたうえで見出し文字に、
Kazuyuki Motoyamaさんの「LigatureSymbols」をアイコンフォントとしてそれぞれ利用させて頂いています。
フロップデザインフォント http://www.flopdesign.com/freefont/flopdesignfont.html
LigatureSymbols http://kudakurage.com/ligature_symbols/

Windowsでのフォントの表示については、もう仕方がないのかなと思います。ある程度は諦めましょう(

また、視認性の悪いフォントを記事本文に使っているケースをたまに見かけますが、そういうエゴは喜ばれないです。読みにくいのに読ませる文章なんて、悪いデザインの見本だと思いますお。

ウェブフォントをもっと効率的に使う手段も

データサイズやライセンスの問題を、お金が解決してくれるケースもあります。
フォントの大御所モリサワさんや、フォントプラスさんでは、月極でウェブフォントを使わせてくれるサービスが始まっています。
これらのサービスでは、必要な文字のフォントデータだけを抽出して送ってくれる機能などが盛り込まれているとのことで、1フォントのために5MB、という不安を拭い去ってくれるそうです。
GoogleやAdobeでも配信が行われていますが、こちらは英字フォントのみで日本語には対応していません。
モリサワ TypeSquare http://typesquare.com/
フォントプラス http://webfont.fontplus.jp/
デジタルステージ http://www.digitalstage.jp/webfont/
Google Fonts http://www.google.com/fonts
Adobe TypeKit https://typekit.com/

実践編 ウェブフォントはどうやって使うか

CSSをある程度理解していれば、だれでも簡単にウェブフォントの設定ができます。

準備はたったの3ステップ

1.CSSでウェブフォントを指定する
2.CSSでクラスやセレクタにフォントファミリーを指定する
3.HTMLを書く

実際のコードで見るとこんな感じ。

webfont1

1.CSSでウェブフォントを指定する

@font-face {}
ここにフォント名、フォントファイルを書き込みます。
1フォントに対して「eot」、「woff」、「ttf」、「svg」の4ファイルを指定していますが、これはブラウザごとの互換性のための記述。
eotはIE系に、woffは最近のモダンブラウザに、ttfはそれ以前のもの、svgは保険、くらいの認識でいいと思います。
最近のブラウザだけカバーできればいいという場合は、「woff」だけあれば大丈夫(なはず)。

webfont2

2.CSSでクラスやセレクタにフォントファミリーを指定する

font-family: ‘’;
今回はh1要素にウェブフォントを当てたかったので、h1に対してfont-familyを指定しています。
※参考画像ではフォント1種類だけを書いていますが、sans-serifとか他のフォントもちゃんと記述しときましょう。
※ステップ1と違うフォントの指定ですみません((

3.HTMLを書く

h1にfont-familyが当たっているなら、h1の中身はウェブフォントが当たった状態で表示されます!
つまりステップはこれだけ!

[発展]アイコンフォントの指定は一癖ある

(以下、コードを見てすげーと思った筆者の感想)
通常、アイコンフォントはアルファベット1文字に1つのアイコンが割り当てられている。
たとえば「c」にはケーキが、「p」にはペットボトルの図形が割り当てられたフォントがあったとする。それぞれの図形を見出しとして表示させたいとき、「cたべもの」「pのみもの」という記述になり、ソースを見ただけでは理解不能な謎のHTMLとなってしまう。これはマークアップとしてあまり好ましくない。
今回利用した「LigatureSymbols」というアイコンフォントではその点が考慮して作られており、特定の単語を記述した時だけ対応する図形に変化するという構造になっている。公式のデモを見ていただければわかると思うが、このフォントを当てたCSSで擬似要素:beforeを作成し、そのcontentに”attr(title)”という記述を行っている。
HTML側ではspanやpタグにフォントを呼び出すクラスと、対応する図形に化ける単語をtitle属性に入れれば良い。こうすることで空要素を作成する必要もなく、意味のある単語だけがHTML上に示されることになる。

CSSとHTML、奥が深い。

ポータル・アンド・クリエイティブ