CODEWITHSUNDEEP
ruby-on-railscssherokuruby-on-rails-4
Seal
Seal

Reputation: 1060

Custom font not working in heroku

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.

Upvotes: 3

Views: 3791

Answers (1)

Richard Peck
Richard Peck

Reputation: 76774

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

Upvotes: 8

Related Questions