Coding Tidbits

Cube Root is an exclusive Ruby on Rails Consultancy. Find our programming ramblings here.

Blog Archive | Company

Integrating Fonts In Rails Application

Posted by: Deepali | 07 May 2014 | Comments

In this blog post we are going to integrate Fonts in our Rails Application.

#####1. Add your font files under /assets/fonts folder.

#####2. Add following line in config/application.rb file within your Application class :

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

#####3. Change Fonts path in css file.

Your Default CSS file contain the fonts path as follows :

  @font-face {
    font-family: 'FontAwesome';
    src:url("../font/fontawesome-webfont.eot?v=3.2.1");
    src:url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),
        url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"),
        url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),
        url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
    font-weight: normal;
    font-style: normal;
   }

We need to change this to :

  @font-face{
    font-family:'FontAwesome';
    src:url("/assets/fontawesome-webfont.eot?v=3.2.1");
    src:url("/assets/fontawesome-webfont.eot?#iefix&v=3.2.1")format("embedded-opentype"),
        url("/assets/fontawesome-webfont.woff?v=3.2.1") format("woff"),
        url("/assets/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),
        url("/assets/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
    font-weight:normal;
    font-style:normal}
  }

#####4. Restart you server.

Thats it you are Done !

Related Posts