Search code examples
ruby-on-railsfontsruby-on-rails-4assetsdirectory-structure

Official way of adding custom fonts to Rails 4?


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?


Solution

  • 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.