Less than a year ago there was an example of implementing custom choices with @font-face tags in Rails 3.1+. Today let’s look at a Rails 4+ implementation.

1) Using sass-bootstrap my application.css.scss includes.

@import "bootstrap";

@font-face {
  font-family: 'Mathlete-Skinny';
  src: font-url('/assets/Mathlete-Skinny-webfont.eot');
  src: font-url('/assets/Mathlete-Skinny-webfont.eot?#iefix') format('embedded-opentype'),
       font-url('/assets/Mathlete-Skinny-webfont.woff') format('woff'),
       font-url('/assets/Mathlete-Skinny-webfont.ttf') format('truetype'),
       font-url('/assets/Mathlete-Skinny-webfont.svg#mathleteskinny') format('svg');
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Mathlete-Skinny', sans-serif;
}

2) My file path to store the fonts

|~vendor/
| `~assets/
|   |~fonts/                                                                                                          
|   | |-Mathlete-Skinny-webfont.eot
|   | |-Mathlete-Skinny-webfont.svg
|   | |-Mathlete-Skinny-webfont.ttf
|   | `-Mathlete-Skinny-webfont.woff

3) Configuration options.

# config/application.rb
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

🙂

Leave a Reply

Screen Shot 2013-12-08 at 9.49.35 PM

I have helped a dozen companies build and optimize their engineering teams to deliver great products.

Let’s work together and I can align your business needs with your technology initiatives.