How do I reference a custom font file in my asset folder?

Question

With Rails 5, how do I reference a custom font file I have uploaded? I have placed the file in

app/assets/fonts/chicagoflf-webfont.woff

Then in my CSS file, I have

@font-face {
    font-family: 'chicagoflfregular';
    src: url('fonts/chicagoflf-webfont.woff2') format('woff2'),
         url('fonts/chicagoflf-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

but I don't see that the font is loading, even after restarting my server. What is the proper path I should be using in my "url" field?

Have you done precompile of assets? May be thats why its not picking up? — uday, Aug 18 '17 at 21:31
No I haven't. Is that necessary? Are you sayhing the path is right? — , Aug 18 '17 at 21:36
Check this https://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline — arieljuod, Aug 18 '17 at 22:27
Also, you could use a service like FontSquirrel to generate more font formats for other browser to have better support — arieljuod, Aug 18 '17 at 22:28
Possible duplicate of [Using custom fonts using CSS?](https://stackoverflow.com/questions/12144000/using-custom-fonts-using-css) — Paolo Forgia, Aug 25 '17 at 14:08

cnnr · Answer 1 · 2017-08-25T06:00:38.727

1

I suggest you to use font_url helper instead of url

@font-face {
  font-family: 'chicagoflfregular';
  src: font_url('fonts/chicagoflf-webfont.woff2') format('woff2'),
       font_url('fonts/chicagoflf-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

AssetUrlHelper.html#method-i-font_url from official docs

UPDATE Did you added fonts folder in config/application.rb?

module YourApp
  class Application < Rails::Application
    ...
    config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
    config.assets.precompile += %w( .svg .eot .woff .ttf )
    ...
  end
end

edited Aug 25 '17 at 06:00

answered Aug 19 '17 at 04:53

cnnr

1,267
4
18
23

I tried this but despite the fact that "ls app/assets/fonts/chicagoflf-webfont.woff2" returns the path to the font from my command line, I don't see the font using your code above. – Aug 24 '17 at 18:52

score 1 · Accepted Answer · edited Aug 04 '20 at 09:04

Assuming you are using Sass, you can use either use font-url or asset-url to call your font. And considering you placed your custom fonts in app/assets/fonts, you should be able to call the fonts directly with no prefix in the path like so

@font-face {
  font-family: 'chicagoflfregular';
  src: font-url('chicagoflf-webfont.woff2') format('woff2'),
       font-url('chicagoflf-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

or

@font-face {
  font-family: 'chicagoflfregular';
  src: asset-url('chicagoflf-webfont.woff2') format('woff2'),
       asset-url('chicagoflf-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

or

If you are not using Sass, then with using url you should able to call the font with prefix assets not fonts like so

@font-face {
  font-family: 'chicagoflfregular';
  src: url('/assets/chicagoflf-webfont.woff2') format('woff2'),
       url('/assets/chicagoflf-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

And if you haven't pre-compiled your assets, your fonts won't appear. So you need to pre-compile the assets. For example for production environment do

RAILS_ENV=production bin/rails assets:precompile

and don't forget to restart the server

I wasn't using sass but renaming my file to application.css.scss and applying your suggestions caused my font faces to show up. Thank you! — , Aug 25 '17 at 20:13
@Natalia By using saas i mean the file extension is `.scss` or .`css.scss`. Anyways I'm glad it worked. Happy coding :) — Pavan, Aug 26 '17 at 08:00

score 0 · Answer 3 · answered Aug 25 '17 at 14:48

Add the fonts path to the assets path as below:

config/initializers/assets.rb

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

# Fonts
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)\z/

Then, you can change the css file to css.erb file and then you can use rails helper methods font_path or asset_path for specifying the font URL in src as below:

custom.css.erb

@font-face {
    font-family: 'chicagoflfregular';
    src: url("<%= asset_path('chicagoflf-webfont.woff2') %>") format('woff2'),
         url("<%= asset_path('chicagoflf-webfont.woff') %>") format('woff');
    font-weight: normal;
    font-style: normal;
}

Please make sure you have precompiled the assets in production environment.

How do I reference a custom font file in my asset folder?

3 Answers3