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?

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