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
– uday, Commented Aug 18, 2017 at 21:31
No I haven't. Is that necessary? Are you sayhing the path is right? — user7055375
– user7055375, Commented Aug 18, 2017 at 21:36
Also, you could use a service like FontSquirrel to generate more font formats for other browser to have better support — arieljuod
– arieljuod, Commented Aug 18, 2017 at 22:28

fqxp · Accepted Answer · 2020-08-04 09:04:55Z

1

+100

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

edited Aug 4, 2020 at 9:04

fqxp

8,0193 gold badges28 silver badges42 bronze badges

answered Aug 25, 2017 at 6:20

Pavan

33.6k8 gold badges53 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7055375 Over a year ago

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!

Pavan Over a year ago

@Natalia By using saas i mean the file extension is .scss or .css.scss. Anyways I'm glad it worked. Happy coding :)

cnnr · Accepted Answer · 2017-08-25 06:00:38Z

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, 2017 at 6:00

answered Aug 19, 2017 at 4:53

cnnr

1,3074 gold badges18 silver badges23 bronze badges

1 Comment

user7055375 Over a year ago

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.

Gokul · Accepted Answer · 2017-08-25 14:48:33Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related