Rails -- Using CSS3's @font-face

Question

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?

Kvass · Accepted Answer · 2012-01-30 13:24:25Z

8

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 << "#{Rails.root}/vendor/assets/fonts". 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.

answered Jan 30, 2012 at 13:24

Kvass

8,49412 gold badges71 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jthomas Over a year ago

I had to just reference myfont.ttf instead of /assets/myfont.ttf, but this worked.

Nick · Accepted Answer · 2012-01-27 14:00:28Z

1

I've not done this myself but I'd have thought that your fonts should be stored in either the public or the assets directory (depending on which version of rails you're using). Lib isn't a directory that's make available for users to download from (unless you're using some sort of clever gem that is meant to handle this for you?).

On pre Rails 3.1 I'd put my fonts in

public/fonts

And then reference them with

url(../fonts/MyFont-AH.ttf)

answered Jan 27, 2012 at 14:00

Nick

2,47816 silver badges20 bronze badges

3 Comments

Nick Over a year ago

What version of rails are you using?

Kvass Over a year ago

as of today 3.2 - when I asked the question I was using 3.0.7, but now that I changed over I am going to see if I can get it working with the Asset Pipeline. If you know how to get it working using assets please let me know!

Nick Over a year ago

In that case I think you would put it in app/assets/fonts and then when you reference it in your CSS insteaed of url you should use font-url('MyFont-AH.ttf') or asset-url('MyFont-AH.ttf', font).

Collectives™ on Stack Overflow

Rails -- Using CSS3's @font-face

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related