how to add a custom font to rails app

Question

I have read several posts which seem to touch on different aspects of adding custom fonts to a rails app, but am struggling to put it all together.

I have .otf font files and need these fonts to be incorporated into my CSS.

It appears you need to add something along the lines of below in the CSS file?

I got this example from How to add a custom font to Rails app?

Any ideas what I am missing?

I have a file in my app / assets folder called MavenProLigh-200.otf

application.css.erb file

@font-face {
        font-family: 'maven';
        src:url('MavenProLight-300.otf');
        font-weight: normal;
        font-style: normal;
        }

development.rb file

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

CSS

#body{
  color:#4e4f4f;
  font-family:'maven';

}

This code works

score 1 · Accepted Answer · answered May 01 '14 at 16:42

1

@font-face is a CSS feature, and has no deal with Rails. It will loads the font the same way as loads image with url(path/to/image.jpg).

font-family inside @font-face defines the name you will use to set the font. Exactly the same as you set Arial or Verdana. Actually this line in @font-face and in your selector will be the same (e.g. a { font-family: 'Nokia Pure Headline'; }). And this is the thing which connects files with font name.

You can define many @font-face with the same font name but different font files, font-weight, font-style, etc. This way you will connect the font file with the set of font properties. So a style with font-family: 'Nokia Pure Headline'; font-style: bold; will use the file from the @font-face where you have defined font-family as 'Nokia Pure Headline' and font-style as bold;

answered May 01 '14 at 16:42

Thanks - I understand what font-family is from a CSS perspective, but here can I just give it any name I want? It doesn't have to relate to the otf files at all does it? – brad May 01 '14 at 21:47
Yes, you can use any name you're finding useful. Files can have any names, even different for each `url()`, it doesn't matter like doesn't matter the name of a `background-image` file. Just beware to preserve the file extension to let a server make the right mime-type header for a browser, so the font-file will be interpreted correctly. – May 01 '14 at 22:26
That clarified things but i'm still getting an error. See updated code above. – brad May 02 '14 at 16:01
`src()` defines the url for the **browser**, not a path on the server. Browser can see only data under the `public` directory (by default), which is data-root (e.g. `/public/assets/img.png` as url will be `/assets/img.png`. To make the link for an asset you should use `asset-url()` which is rails feature and forms the correct url to an asset. – May 02 '14 at 16:17
But rails doesn't serve fonts dynamically (as styles and javаscripts), with `asset-url()` you should do `rake assets:precompile` to automatically place all such assets under the `public`. – May 02 '14 at 16:25
My code above works in localhost but not on heroku. Any idea why the code above works in localhost but not in heroku? I get a 404 error on the font file. When i change above to font-url, it breaks dev, still doesn't work on heroku, but the 404 error goes away. Any idea how to get it working on both? Thanks for all the help. – brad May 02 '14 at 19:27
Instead of make this question a discussion (which SO questions aren't intended for), if would be nice to you to read some quite laconic [guides.rubyonrails.org](http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets) to find useful information about common and regular problems you're experiencing now. For example, passing an env name: `RAILS_ENV=production bundle exec rake assets:precompile`. Because by default the current env is used, it's probably was `development`, while heroku is using `production` by default. Assets are compiled for each env separately. – May 02 '14 at 19:38

score 0 · Answer 2 · edited May 01 '14 at 17:07

0

Just to answer second part of your question

Would the @font-face code go at in my application CSS file?

Answer: You can add it in application.css file it's your choice. I would recommend you to

create a font.css file and put font related code there and then require that font.css file in application.css

edited May 01 '14 at 17:07

Mohamad

34,731
32
140
219

answered May 01 '14 at 16:56

Addicted

749
1
6
19

how to add a custom font to rails app

2 Answers2