DESIGN

ブログ制作に使ったフォントLigature Symbols

ARTICLE - No.9
issue-2015.5.5 update-2015.12.6
2,401 views

Posted by Keisuke Aratsu
POP1280

ブログ制作にあたって、レスポンシブでの構築を考えていたのでtwitterやfacebook、hatena bookmarkのアイコンなど、できるだけ画像を使わずフォントで対応したいと考えていた。
実際探してみると中々思うものが見つからず、自分でトレースしてフォント化しようかなぁ、とかも考えていた。だけど時間節約したいという事もあって何とかできないかなと思っていた時に見つけたのがこのフォントでした。
それまではico moonっていうサイトのものを使おうと考えていたんだけど肝心のhatena bookmarkが無かったのであえなく断念。なので見つけた時はかなり嬉しかった。
日本人のデザイナーさんが作っているのでhatenaは入っていたし、普通にweb制作する上で必要になりそうなものも一通り揃えてくれているのでこれを使えば基本的には困る事はなさそう。とてもありがたい。

使い方

制作者の方がサイトにも記載してくれていますが、HTMLに書き込むかCSSで表示させるかのどちらか。
僕はHTMLに書いた方が管理しやすかったので直接書いてます。

HTML

<p>Simple use for mailto link.</p>
<a href="hogehoge" class="lsf">mail</a>

<p>Use tha icon with text.</p>
<a href="hogehoge" class="lsf-icon" title="twitter">Twitter</a>

<p>Use tha icon with unicode.</p>
<a href="hogehoge" class="lsf-icon amazon">Amazon</a>

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

CSS

@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');
    src: url('LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
  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;
}

.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
}

.lsf-icon.amazon:before {
  content: '\E007';
}

という感じで使うと表示できます。
HTMLのサンプルだとaタグに直接指定してますがspanでもいけるので僕はspanにしてます。CSSだとbeforeやafterで表示させればOK。ただ、ダウンロードしたフォントをサーバーにアップするのをお忘れなく。ここ肝心です。
スマホで見ると美しいの一言につきます。最高。そして感謝。

ダウンロードはこちらから
Ligature Symbols