Official way of adding custom fonts to Rails 4?

Fellow Stranger picture Fellow Stranger · Jan 21, 2014 · Viewed 25.9k times · Source

I'm researching how to add custom fonts to my Rails app, e.g. by adding a fonts folder in the assets folder - and I cannot find an "official" Rails way on how to do this.

Yes, there are plenty of questions/answers here on SO about the matter, all seemingly with their own hacks. But shouldn't such a common practice go under Rails' famous "convention over configuration"?

Or if I've missed it - where is the documentation reference on how to organize fonts in a Rails app?

Answer

Nikhil Nanjappa picture Nikhil Nanjappa · Jan 21, 2014

Yes the link given will explain it well, however if u need another detailed explanation then here it is

  • Firstly to use custom fonts in your app you need to download font files, you can try https://www.1001freefonts.com/ and look for fonts

    Few of the most popular font file formats are mainly .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)

  • You can move the downloaded fonts to your app folder under app/assets/fonts/

  • After downloading the file you need to "declare" the fonts you will be using in your css like this

    @font-face {
      font-family: "Kaushan Script Regular";
      src: url(/assets/KaushanScript-Regular.otf) format("truetype");
    }
    
  • Finally you can use the font-family that you just declared wherever you want like this

    #e-registration {
      font-family: "Kaushan Script Regular";
    }
    

Hope this helps.