Adding custom fonts in Rails

Question

I am trying to add a custom font that I downloaded in my Rails App. This is what I did: I downloaded the font (Georgia.tff) and put it in app/assets/fonts/Georgia.tff. My main CSS file looks like this:

foundation-and-override.scss

 @font-face {
    font-family: "Georgia";
    src: url(/assets/fonts/Georgia.ttf) format("truetype");
  }

.header {
    font-family: "Georgia";
}

and this is where I want to apply the font:

_header.html.erb

<header class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="header">
      <h1><a href="/">SMART INVESTORS'S CLUB</a></h1>
  </ul>
</header>

It's not working. I'm using Rails 4.2.1. I referenced adding custom font in my app and Official way of adding custom fonts to Rails 4?. No luck.

Answer 1

foundation-and-override.scss

@font-face{ font-family:"Georgia"; src:asset-url("Georgia.ttf") format("truetype"); }

In application.rb you have to add:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

And font file "Georgia.ttf" must be in app/assets/fonts/Georgia.ttf

Answer 2

Rails provides the font-url helper method for exactly this:

@font-face{
  font-family:'Georgia';
  src:font-url('Georgia.ttf');
}

You can also just use asset-url:

@font-face{
  font-family:'Georgia';
  src:asset-url('Georgia.ttf');
}

By default Sprockets should be able to find any file in your assets folder, so no additional config should be needed.