このブログはWordPressの公式テーマ「Twenty Twelve」をベースにカスタマイズしているのですが、色々いじり始めると、自分がどこをどういじったのか忘れてしまいそう。ということで備忘録的にカスタマイズした内容をまとめるシリーズです。コピペして使ってみて下さい。
ウェブフォント「IcoMoon」の特徴
僕が導入したウェブフォントはIcoMoonです。
IcoMoonのおすすめポイントは2つあります。
ウェブでよく使われる基本的なアイコンが揃っている
ホーム、ブラウザ、ツイッターやグーグルなどのウェブサービスのアイコンが揃っています。ウェブアイコンとしては十分すぎるラインナップです。
さらに、
オリジナル画像をウェブフォント化できる
指定のファイル形式（SVG）の画像を用意すれば、IcoMoonに無いオリジナルの画像もウェブフォント化して使うことができます。SVG形式の画像は簡単に作成できます。「svg png 変換 」で検索してみて下さい。フリーの変換サービスがいくつも出てきます。
実際このブログでも、LINE、はてなブックマーク、Feedly、Pocketのアイコンは後から追加したものを使っています。
さっそく使い方をメモしておきます。
IcoMoonのサイトからダウンロード
IcoMoonにアクセスして使いたいアイコンを選択し、右下の「Generate Font」をクリックします。ここではとりあえず、全て選択しておくことをおすすめします。後から追加するとなるとちょっと手間なんです。ということで「Select All」しましょう。
すると下記のような画面が表示されます。ここで表示されているウェブフォントの「名前」と「番号」は実際に使用するときに必要になります。右下のDownloadから.zipファイルを取得します。
レンタルサーバーにフォントをアップロード
ダウンロードした.zipファイルを解凍すると、「fonts」というフォルダがあります。このファイルをサーバー上の子テーマ直下の階層にアップロードします。
次に、style.css に以下のコードを追記します。
/*--------------------------------------
IcoMoonのWEBフォント
--------------------------------------*/
@font-face {
font-family: 'icomoon';
src: url('./fonts/icomoon.eot?qwus18');
src: url('./fonts/icomoon.eot?qwus18#iefix') format('embedded-opentype'),
url('./fonts/icomoon.ttf?qwus18') format('truetype'),
url('./fonts/icomoon.woff?qwus18') format('woff'),
url('./fonts/icomoon.svg?qwus18#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ここまで来たらあと一歩です。
実際にウェブフォントを使う方法
phpファイル内に記述する方法
例えば、この画像のようなところ。
該当部分の.phpファイル内に次のように記述します。
<span class="icon-pacman"></span>
そして、style.css 内には次のコードを追記します。
.icon-pacman:before {
content: "\e91a";
}
.icon-○○○の○○○部分と、4文字のコード（ここでは\e91a）は、はじめにダウンロードしたicomoonフォルダ内のdemo.htmlを参照して下さい。
style.css内に記述する方法
一方で、style.css内に直接記述して表示させる場合もあります。
これは本文の見出し（h2タグ）の前にチェックマークのウェブフォントを表示させています。具体的には次のように記述してます。
.entry-content h2:before{
font-family: 'icomoon';
content:"\ea14";
}
「icomoon」というフォントファミリーの「\ea14」という”文字”を、h2タグの前（before）に表示させる、という指示をしています。
記事本文に直接記載する方法
これは.php内に直接記載する方法とほぼ同じです。ウェブフォントを表示したい場所に
<span class="icon-○○○"></span>
style.css 内に
.icon-○○○:before {
content: "\xxxx"; /* 4文字のコード */
}
と書くことで表示されます。
まとめ
ウェブフォントなら表示負荷も軽くなり、見た目もすっきりとかっこよくなり、いいことばかりです。ぜひ導入してみて下さい。
