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

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?

Answer 1

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

Answer 2

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

Answer 3

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.