Webフォントを利用した、画像を使わないWebサイトの作り方

当サイト、ひっそりとリニューアルしました。
リニューアルに際して、
『できるだけシンプルに』
『できるだけ軽く』
『できるだけ見やすく』
を信条にデザインしたのですが、テキストばかりになってしまうと、ただの味気ないサイトになってしまいます。
そこで、利用したのが “WebSymbolsRegular” というWebフォント。なんとこれ、英数字がそれぞれ汎用性の高いアイコン画像になっています。
このWebフォントを使うことにより、当サイトは画像を一切使わずに作りました。
※WordPress のテーマとして画像を一切使っていないという意味です。各記事では画像を使っています。
『習うより慣れろ』ということで、まずは使ってみましょう。

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

以下ページよりフォントをダウンロードします。
http://www.justbenicestudio.com/studio/websymbols/

Webフォントを読み込む

“url”は、ダウンロードしたWebフォントのパスに指定してください。

@font-face{
    font-family: 'WebSymbolsRegular';
    src: url('/fonts/websymbols-regular-webfont.eot');
    src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/websymbols-regular-webfont.woff') format('woff'),
         url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
         url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    }

Webフォントを指定する

Webフォントを指定します。こんな感じ↓。

#site_title:before{
    font-family: 'WebSymbolsRegular';
    content:'S';
}

[:before] について

このサイトでは、主に :before を使って、指定しています。
理由としては、
●HTMLに直接書いてしまうとSEO的に良くない
　（見た目はアイコンでもHTML上は、”S”とか”:”になっているので）
●フォント指定しやすい
　（

の全体フォント指定してしまうと、他の文字もアイコンに変換されてしまう）

まとめ

全体をまとめると以下のようになります。

Webデザイナーの備忘録

アイコンの種類

アイコンの種類は、こちらを参照してください。

もちろん色も指定できる（css の color ）ので、色々な場面で使えると思います。