1

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.

Community
  • 1
  • 1
emi
  • 2,830
  • 5
  • 31
  • 53
  • The url method does not compute a path to an asset but merely returns the full path used for a request. – trosborn Jun 13 '15 at 22:06

2 Answers2

3

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

Viktor Leonets
  • 473
  • 4
  • 13
3

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.

trosborn
  • 1,658
  • 16
  • 21
  • and this even throws in too many errrors. I think the version of Rails matter here. – emi Jun 14 '15 at 16:14
  • No, these are both valid options in 4.2.1 :/ There may be a problem with how your app compiles the assets. What errors are you getting? – trosborn Jun 14 '15 at 19:33