CODEWITHSUNDEEP
ruby-on-railsrubyherokuruby-on-rails-4ruby-2.1
Incerteza
Incerteza

Reputation: 34944

Fonts are not found (404) on heroku

After deploying to heroku, the fonts get lost, meaning they are not found when a page loads. 

#application.ru

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

This is what was suggested on the forums. But that doesn't work. There are no error during deploying to heroku.

What else can I do?

/app/assets/stylesheets/_fonts.css.scss

#..............................

@font-face {
    font-family: 'Verb Extra Bold';
    src: asset-url('verbextrabold-webfont.eot');
    src: asset-url('verbextrabold-webfont.eot?#iefix') format('embedded-opentype'),
         asset-url('verbextrabold-webfont.woff') format('woff'),
         asset-url('verbextrabold-webfont.ttf') format('truetype'),
         asset-url('verbextrabold-webfont.svg#verbextrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

#..............................

Upvotes: 1

Views: 1840

Answers (2)

Abel O&#39;Ryan
Abel O&#39;Ryan

Reputation: 4242

Put woff, eot, svg and ttf files in app/assets/fonts and font_name.scss in app/assets/stylesheets folder

Don't forget the .scss extension and asset_path helper

font-url( asset_path('file.woff')) format('woff')

And this in assets.rb:

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

Pe-icon-7-stroke.css example:

@font-face {
    font-family: 'Pe-icon-7-stroke';
    src:url(asset_path('Pe-icon-7-stroke.eot?-2irksn'));
    src:url( asset_path('Pe-icon-7-stroke.eot?#iefix-2irksn')) format('embedded-opentype'),
        font-url( asset_path('Pe-icon-7-stroke.woff?-2irksn')) format('woff'),
        font-url(asset_path('Pe-icon-7-stroke.ttf?-2irksn')) format('truetype'),
        font-url(asset_path('Pe-icon-7-stroke.svg?-2irksn#Pe-icon-7-stroke')) format('svg');
    font-weight: normal;
    font-style: normal;
}

Upvotes: 2

fivedigit
fivedigit

Reputation: 18702

If your fonts are in app/assets/fonts, you shouldn't have to add them to the load path, so you can remove the two lines from your application.rb.

Try changing asset-url to font-url in your stylesheet.

You can check if precompiling works locally by running ENV=production rake assets:precompile in the terminal.

Upvotes: 2

Related Questions