How to add custom fonts to the Rails Application

Steps to add custom fonts to rails

1. Search and Download your prefered fonts from any website. I prefer google fonts.

2. Move the download files to your rails application’s vendor folder. i.e vendor/assets/fonts

3. Add following configuration to fileconfig/application.rb.

config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

4. Link all your fonts and font types into rails application. Add following lines to your CSS file.

@font-face {
font-family: 'SourceSansPro';
src: url('SourceSansPro/SourceSansPro-Regular.ttf') format('truetype');
src: url('SourceSansPro/SourceSansPro-Bold.ttf') format('truetype');
src: url('SourceSansPro/SourceSansPro-Italic.ttf') format('truetype');
}

5. Now you can use the above-declared @font-face in our CSS file using the below code.

#invoice-wrapper {
font-family: 'SourceSansPro';
}

Quick Info

  • url of the declarationfont-face should exist in your foldervendor/assets/fonts.
  • font-family of the isfont-face the name of your font which you should use in the CSS file.
  • During assign font in CSS, the font-family should be same as decorated in @font-face