Custom font not working in heroku

Question

Using Rails 4

I have read lots of threads on how to get my custom fonts working in heroku. They work locally in dev mode but when pushed to heroku they dont show up.

my @font-face located in master stylesheet

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

}

Application.rb

config.assets.paths << "#{Rails.root}/app/assets/fonts"

I have precompiled assets with

rake assets:precompile

No errors in Heroku logs.

Cant figure this out, does anyone have any suggestions?

UPDATE:

Visited the site on my phone and the font works... Cleared cache on computer, still not working on computer.

Richard Peck · Accepted Answer · 2014-02-11 10:10:48Z

8

This could be down to several issues; most notably, I would recommend you're not using dynamic asset paths:

Fingerprinting

Rails uses asset fingerprinting when you precompile assets

The reason for this is to allow each asset to be individually allocated to the system, thus providing a more robust structure (or something). Basically, it adds an MD5 hash to the end of your asset filenames:

global-908e25f4bf641868d8683022a5b62f54.css

Paths

Because dynamic fingerprinting makes all precompiled assets have different names, you need to use Rails' dynamic path helpers:

#app/assets/stylesheets/application.css.scss
@font-face {
    font-family: 'caviar_dreamsregular';
    src: asset-url('caviardreams-webfont.eot');
    src: asset-url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
         asset-url('caviardreams-webfont.woff') format('woff'),
         asset-url('caviardreams-webfont.ttf') format('truetype'),
         asset-url('caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

You'll need to use a dynamic stylesheet engine such as SASS to handle the dynamic paths

answered Feb 11, 2014 at 10:10

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

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

1 Comment

Nick B Over a year ago

My issue was I had the fonts in vendor/assets/fonts (and even with adding config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts') I couldn't get it to work). Once I moved the fonts to app/assets/fonts and re-deployed, they started working on Heroku!

Collectives™ on Stack Overflow

Custom font not working in heroku

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related