Official way of adding custom fonts to Rails 4?

Question

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 ho

Answer 1

I had some trouble with the approaches listed above, because the production css was not pointing to the compiled ttf font, so I then successfully used this alternative approach borrowed from https://gist.github.com/anotheruiguy/7379570:

1. Places all font files in assets/stylesheets/fonts. e.g. assets/stylesheets/fonts/digital_7.ttf.

2. I defined in a .scss file that we use:

   @font-face {
       font-family: 'Digital-7';
       src: asset-url('fonts/digital_7.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
   }
   

3. I leveraged the custom font in other .scss files:

   .digital-font {
       font-family: 'Digital-7', sans-serif;
       font-size: 40px;
   }
   

---

This said, a much cleaner way of doing this is to put the font definition (digital_7_mono.ttf in this example) on a separate site.

If you are using Cloudfront, for example, in a Cloudfront directory called my_path, upload your font files, then define a css file (e.g. digital_fonts.css)

@font-face {
  font-family: 'Digital-7-Mono';
  font-weight: normal;
  font-style: normal;
  src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}

In your html, inside the tag, add: