Font-Face not Working with Rails 3.1

Question

I just upgraded to Rails 3.1 and the Asset Pipeline and I can't figure out why my font-face is not being read in anymore. I've tried the answers in this post (with no luck): Using @font-face with Rails 3.1 app?

Currently, I'm trying the selected solution. I have a fonts folder under app/assets. The file name is correct and exists in the fonts directory.

In my Application.rb

config.assets.paths << "#{Rails.root}/app/assets/fonts"

I've also tried, from the Rails Guide (http://guides.rubyonrails.org/asset_pipeline.html):

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

With this code, the path maps to this when the code is run src: url('/assets/League_Gothic-webfont.eot

In my CSS:

@font-face {
  font-family: "League_Gothic";
  src: url('<%= asset_path('League_Gothic-webfont.eot') %>');
  font-weight: normal;
  font-style: normal;
}

When I try the other solution, essentially hard coding the path:

src: url(/assets/fonts/League_Gothic-webfont.eot);

I get this error when I click on the link in the source code of the page:

No route matches [GET] "/assets/fonts/League_Gothic-webfont.eot"

score 3 · Answer 1 · answered Jun 11 '12 at 04:50

Add this to application.rb

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/vendor/assets/fonts"
# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

Then add this to css or scss before the font is used

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

score 2 · Answer 2 · answered Mar 10 '12 at 15:41

2

You shouldn't have to make those changes in application.rb.

But what's probably your problem is that you're doing "assets/fonts/myfont.eof" when you should be doing "assets/myfont.eof". Don't address fonts, images, etc. directory names if they're assets, just call them from assets/

You may have to get rid of that stuff that you changed in application.rb in order for this to work. I dunno, try it with and without.

Also, from my CSS file on a project I'm working on:

@font-face
{
  font-family: ubuntu;
  src: url("/assets/Ubuntu-R.ttf");
}

This might help.

answered Mar 10 '12 at 15:41

varatis

14,494
23
71
114

You're correct, but not exactly. In my Rails 3.2 project I just did src: url("league_gothic-webfont.eot"); without "assets" or "assets/fonts" and it just worked, even though the asset's path is vendor/assets/fonts/league_gothic-webfont.eot – idrinkpabst Aug 20 '13 at 22:40
@idrinkpabst I think this was for a Rails 3.1, and it's not the same for Rails 3.2 projects as you noted – varatis Sep 04 '13 at 16:33

Font-Face not Working with Rails 3.1

2 Answers2