Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Rails -- Using CSS3's @font-face

Rails -- Using CSS3's @font-face

Problem

In my global.css file which is loaded by application.html.erb, I have the following lines:

@font-face {
  font-family: myfont;
  src: url(/lib/fonts/MyFont-AH.ttf) format("truetype"); /* For IE */
  src: local("MyFont-AH"), url(/lib/fonts/MyFont-AH.ttf) format("truetype"); /* Non-IE */ 

}

And then elsewhere I have

h1 {
  font-family: myfont, helvetica, arial;
}

When I booted up the server h1 was using the Helvetica font, and I got the error in my log ActionController::RoutingError (No route matches [GET] "/lib/fonts/MyFont-AH.ttf"):. I figured that this meant I would need to edit my routes file, so I went and added the line get "/lib/fonts/MyFont-AH.ttf", but then when I reloaded the page I got the error missing :controller because there is no controller tied to this action. When I created a controller and matched the get request to it, it then wanted a template. It seems that it wants me to have a controller / action set up like most other get requests, so I'm not quite sure what to do here. Any suggestions?

Problem courtesy of: Kvass

Solution

I upgraded to Rails 3.2 and am using the Asset Pipeline (from Rails 3.1+), and I placed the fonts I wanted to display in vendor/assets/fonts. Then I added the following line to my application.rb file: config.assets.paths . Finally in my CSS file I used the format:

@font-face {
  font-family: myfont;
  src: url("/assets/myfont.ttf") format("truetype"); /* For IE */
  src: local("myfont"), url("/assets/myfont.ttf") format("truetype"); /* For non-IE */
}

I think a part of the original problem might have been that my files were stored with the extension .TTF rather than .ttf but I'm not sure. All I know is it's working now.

Solution courtesy of: Kvass

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Rails -- Using CSS3's @font-face

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×