LINE・はてブのマークもあるアイコンWebフォント「Ligature Symbols」を使う方法

このサイトの記事上下にあるTwitterやFacebook、グーグルプラス、LINEなどのシェアボタンにWebフォントを使ってみました。Google＋はPC表示までウィンドウザイズを広げると現れます。

こういったボタンは画像で作ると簡単だけど、拡大縮小でボヤケたり、サイズの変更ができなかったりするのでCSSで作ったほうが綺麗です。SEO的には画像を使わないことで、表示の高速化にも役立ちます。

今回使ったウェブフォントは、「Ligature Symbols」です。

Twitterのアイコン「Twitter」はもちろん、「LINE」や「はてなブックマーク」のアイコンまでフォントとして使えるようになります。

導入の仕方

Ligature Symbols

上記サイトに移動し、いちばん下のほうにある「Download」ボタンでZIPファイルをダウンロードします。

解凍したらサーバーに上げる

解凍したフォルダを見ると、「LigatureSymbols-2.11」（2.11はバージョンのため今後数字が変更するかもしれません）から始まる、拡張子の違うファイルが5個あります。

LigatureSymbols-2.11.eot
LigatureSymbols-2.11.otf
LigatureSymbols-2.11.svg
LigatureSymbols-2.11.ttf
LigatureSymbols-2.11.woff

これをサーバーにアップロード。サーバーを持っていないなら、DropboxのPublicフォルダなどに入れてリンクを取得しましょう。ドロップボックスのPublicフォルダは無料でサーバー代わりに使えます。

ドロップボックスの登録はこちら→ Dropboxに無料で登録

CSSに追記

解凍したフォルダに入っている「style.css」を開いて、記載されているCSSをコピーして貼り付けます。

必要なCSS部分を抜き出したものを貼っておきます。３〜７行目のurl部分に、先ほどサーバーにアップしたファイルのURLを下記のように記載します。

src: url('https://***.com/LigatureSymbols/LigatureSymbols-2.11.eot');

@font-face {
    font-family: 'LigatureSymbols';
    src: url('LigatureSymbols-2.11.eot');
    src: url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('LigatureSymbols-2.11.woff') format('woff'),
         url('LigatureSymbols-2.11.ttf') format('truetype'),
         url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}

.lsf {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}

これで完了です

これでWebフォントが使えるようになりました。

例えば

<span class="lsf">twitter Twitter</span>

と書くと、「twitter Twitter」と表示されます。

<span class="lsf-icon" title="twitter">twitter</span>

とタイトル属性を指定すれば「twitter」となります。

色を付けたい場合は毎回指定

例えば、LINEなら

<span class="lsf-icon" title="line" style="color:#1DCD00;">LINE</span>

こう書くと、「LINE」このように表示されます。

あとがき

複雑に見えるかもしれないけど、やってみると意外と簡単です。

画像を使わないことで、どんな画面サイズにも綺麗に表示できるのでオススメです。