Front-End Developing in Rails: Adding fonts to your RoR project

Asset pipeline in rails need some working with to be able to understand fully how to use it.

You want to Add new font

It can be simple if you decide to use the Asset pipeline in rails. I follow a simple procedure

  1. Add a folder called fonts or font in your app folder. e.g app/assets/fonts
  2. Now you would need to add the new created folder to the asset path in config/application.rb. eg. config.assets.paths << Rails.root.join(“app”, “assets”, “fonts”)
  3. You can decide to user the bootstrap @font-face to add your new fonts. Make sure you save the file with scss file extension. e.g style.css.scss
@font-face {
 font-family: ‘GT Walsheim’;
 src: url(font-path(‘GTWalsheimProTrial-Black.eot’) + “?#iefix”) format(‘embedded-opentype’),
 url(font-path(‘GTWalsheimProTrial-Black.woff’)) format(‘woff’),
 url(font-path(‘GTWalsheimProTrial-Black.ttf’)) format(‘truetype’),
 url(font-path(‘GTWalsheimProTrial-Black.svg’) + “#GTWalsheim”) format(‘svg’);
 font-weight: normal;
 font-style: normal;
}

I love this font :). Use different format that could help you support many devices. You can get most font format for different devices using https://www.web-font-generator.com/.

4. Restart your server to see the needed change.

You can start off by using the google free fonts before you move to using specific fonts. And depending on your project take some time to checkout the fonts that are used in your industry. Play around with some of them and relly on feedback to make your choice. Feedbackd should drive your UX/UI decision.

Please tell us what you feel about our application at www.investxd.com. We are a financial online platform that allow young professionals save by investing. You can discover, compare and monitor your investment.