How do I use a custom font in Ruby on Rails?

Question

I have

users.scss

@font-face {
  font-family: scriptina;
  src: asset-url('scriptina.ttf')
}

.script {
  font: scriptina, cursive; 
}

Which generates

@font-face {
  font-family: scriptina;
  src: url(/scriptina.ttf);
}
/* line 18, C:/Users/Chloe/workspace//app/assets/stylesheets/users.scss */
.script {
  font: scriptina, cursive;
}

But http://localhost:3000/scriptina.ttf generates

Routing Error
No route matches [GET] "/scriptina.ttf"

$ ls app/assets
config  images  javascripts  scriptina.ttf  stylesheets

Rails 5

Reference: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

I already answered [here](https://stackoverflow.com/questions/12329137/how-to-add-a-custom-font-to-rails-app/21427234#21427234) and [here](https://stackoverflow.com/questions/12329137/how-to-add-a-custom-font-to-rails-app/21427138#21427138)This will help you — praaveen V R, Jun 12 '17 at 10:27

score 1 · Accepted Answer · answered Jun 12 '17 at 01:38

1

One method (outlined here) would be to add a fonts folder to app/assets, and then add it to the folders that your app will look for assets in by editing config/application.rb:

# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")

Then move scriptina.ttf into app/assets/fonts and your asset-url helper will then be referencing a valid path to your font.

answered Jun 12 '17 at 01:38

Scott

98
4

Hmm, I always thought it searched all of `assets/` to find things. I modified `config/initializers/assets.rb` instead due to this comment: `# Application configuration should go into files in config/initializers`. I added `Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")`. Also had to change `font:` to `font-family: scriptina, cursive;`. – Chloe Jun 12 '17 at 01:54

How do I use a custom font in Ruby on Rails?

1 Answers1