1

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;

}

#..............................
5
  • How do you link to the fonts from your stylesheets? You shouldn't even have to add it to the assets load paths to get it to work when they're in app/assets/fonts.
    – fivedigit
    Commented May 1, 2014 at 18:00
  • Can you try heroku run rake assets:precompile ? Commented May 1, 2014 at 18:06
  • Not sure if it makes a difference, but try changing asset-url to font-url. Try precompiling the assets on your local machine to see if the fonts also get included by running ENV=production rake assets:precompile.
    – fivedigit
    Commented May 1, 2014 at 18:08
  • @fivedigit, I did both, not sure what exactly helped me but that helped, thanks.
    – Incerteza
    Commented May 1, 2014 at 18:14
  • I fixed this by moving the fonts from the vendor/assets folder to the root assets folder. Rails 4 and Heroku. Works.
    – zero_cool
    Commented Nov 29, 2014 at 18:37

2 Answers 2

2

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.

2

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;
}
3
  • 1
    Please explain your solution. Commented Feb 23, 2016 at 12:39
  • No problem @MartinZabel. Edited. Commented Feb 23, 2016 at 16:17
  • 1
    thank you so much, changing my css file to .scss and url => font-url made it.
    – 3pns
    Commented Sep 10, 2016 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.