CODEWITHSUNDEEP
cssruby-on-rails
brad
brad

Reputation: 1695

how to add a custom font to rails app

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

Upvotes: 0

Views: 911

Answers (2)

Addicted
Addicted

Reputation: 749

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

Upvotes: 0

user2895892
user2895892

Reputation:

@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;

Upvotes: 1

Related Questions