Railsにフォントを導入するまで

はじめに

ネット上には素晴らしいフリーフォントがたくさんあります。
デザインの表現の幅を広げるために是非、活用していきたいところ。
そこで、フリーフォントをRailsに導入していきます。

フォントファイルの導入

ここでは導入したいフォントファイルをsmog.otfとします。
publicフォルダにfontsフォルダを作り、そこにフォントファイルを配置。

- public
    - fonts
        - smog.otf

使用するcssファイル(ここではsample.css)に以下のコードを追加します。
font-familyの名前は自由に設定できます、今回は'Smog'としましょう。
またformatはファイルのフォーマットに合わせます。

フォーマット	拡張子
format('woff')	.woff
format('truetype')	.ttf
format('opentype')	.otf または .ttf
format('embedded-opentype')	.eot
format('svg')	.svg または .svgz

sample.css

@font-face {
  font-family: "Smog";
  src: asset-url('/fonts/smog.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

あとはいつも通りcssでフォントを指定すれば使えます。
以下は例です。

sample.css

.foo h1 {
  font-family: 'Smog';
}

index.html.erb

<div class="foo">
  <h1>hello!</h1>
</div>

以上です、お疲れ様でした！