Question

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;

}

#..............................
Was it helpful?

Solution

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.

OTHER TIPS

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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top