国産Webフォント「Ligature Symbols」をRailsで使う方法

いつもはみんな大好きFont Awesomeでアイコン周りを済ませてるんですが、いまやってる案件でLINEのアイコンが必要になったのでLigature SymbolsをRailsに組み込みました。
Ligature Symbolsに限らず、他のWebFontを組み込む場合でも同じ内容でいけるはずです。

Ligature Symbolsを設置する

• Ligature Symbolsより、ファイル一式をダウンロード
• vendor/assets下にfontsディレクトリを設置して、解凍したファイルからフォントファイルを格納

|-vendor/
|---assets/
|-----fonts/
|-------LigatureSymbols-2.11.eot
|-------LigatureSymbols-2.11.otf
|-------LigatureSymbols-2.11.svg
|-------LigatureSymbols-2.11.ttf
|-------LigatureSymbols-2.11.woff

• このあと、config.assets.pathsの設定っていらないんですね。下記の記事が参考になりました。
  • Rails 4 で assets に font を追加する方法

Ligature Symbolsを読み込む

• Ligature SymbolsにCSSの書き方書いてある
• urlだけ、asset-urlに置き換える

app/assets/user.css.scss

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

（省略）

Viewで表示

• 後は公式ドキュメント通りです。

app/views/users/index.html.erb

<span class="lsf-icon" title="line">Line</span>