Custom Font Not Working on Rails

Question

I have read lots of articles on getting a custom font to work on a rails app, yet I am still having trouble with it.

I downloaded X font from dafont.com. I unzipped it, and the package contained x.otf. I then installed it on my computer, but when I use it in my app the font is distorted.

I then downloaded Y font from dafont.com. I unzipped, it contained y.ttf. I did not install it on my machine and instead placed it in /assets/fonts. I then added the following in my custom.css.scss file.

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('/assets/fonts/y.ttf');
  src: url('/assets/fonts/y.ttf?iefix') format('eot'),
  url('/assets/fonts/y.woff') format('woff'),
  url('/assets/fonts/y.ttf') format('truetype'),
  url('/assets/fonts/y.svg#webfont3AwWkQXK') format('svg');
  font-weight: normal;
  font-style: normal;
}

I then called it in my custom.css.scss stylesheet

body {
    font-family: y;
}

When I refresh still no success. Any clues as to why X is distorted, or Y will not work?

Answer 1

You can use asset pipelines with fonts. First add in application.rb :

config.assets.paths << Rails.root.join("app", "assets", "fonts")

Rename custom.css.scss file into custom.css.scss.erb and use asset_path for each font file like this :

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('<%= asset_path("y.ttf") %>');
  src: url('<%= asset_path("y.ttf?iefix") %>') format('eot'),
  url('<%= asset_path("y.woff") %>') format('woff'),
  url('<%= asset_path("y.ttf") %>') format('truetype'),
  url('<%= asset_path("y.svg#webfont3AwWkQXK") %>') format('svg');
  font-weight: normal;
  font-style: normal;
}