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

DESIGN

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

  • ARTICLE - No.9
  • issue-2015.5.5   
  • 752 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

LATEST_

ABOUT ME_

アラツ ケイスケ :
福岡県糟屋郡志免町在住。畑で野菜を育てて生きていきたいwebデザイナー。嫌いなものはクチャラー。1984年10月生まれ。昨年三十路デビューしました。音楽とB級映画をこよなく愛す一面、垂れ流すだけで何を聞いたか観たのか全く記憶にないこともしばしば。(大抵寝落ちしてるか、本を読んでます。)
このブログでは自分が書きたい音楽の事やデザインの事、福岡の事を好きなように書いて行くつもりです。記事掲載のご相談も受け付けますのでどうぞお気軽に。随時受け付けます。僕がバテあがってたらお返事までお時間掛かると思いますが悪しからず。

→CONTACT