How to Use @Font-Face Declarations in Rails 4+

This is a guide to using custom web-fonts with Rails 4+ and the asset pipeline.

1. Get an .eot, .woff, .ttf, and .svg version of your font. There are services that do this, like Font Squirrel.

2. Paste all of these files in vendor/assets/fonts.

3. Add this to config/application.rb:

config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')config.assets.precompile << /.(?:svg|eot|woff|ttf)$/

4. Define @font-face in your CSS like this for each font. Change the name “Ubuntu” obviously to match your file names.

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

5. Use your font by setting font-family to match the font family from the font-face declaration.

h1 {  font-family: 'Ubuntu';}