CODEWITHSUNDEEP
ruby-on-railsfonts
bigpotato
bigpotato

Reputation: 27507

Rails 4 production env not finding fonts in app/assets/fonts/?

I'm using Rails 4 and trying to deploy to production, but my fonts are not loading properly. I have all my fonts in my app/assets/fonts folder. When I go on the homepage and look at the browser console, I see this:

    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/sourcesanspro-regular-webfont.woff"
    sources...nt.woff
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/OpenSans-CondLight-webfont.woff"
    OpenSan...nt.woff
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/fontawesome-webfont.woff?v=4.0.3"
    fontawe...v=4.0.3
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/sourcesanspro-regular-webfont.ttf"
    sources...ont.ttf
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/OpenSans-CondLight-webfont.ttf"
    OpenSan...ont.ttf
    "NetworkError: 404 Not Found - http://staging.mysite.com/assets/fontawesome-webfont.ttf?v=4.0.3"
    fontawe...v=4.0.3

My project directory looks like this in app/assets:

    .
    ├── fonts
    │   ├── DroidSans-webfont.eot
    │   ├── DroidSans-webfont.svg
    │   ├── DroidSans-webfont.ttf
    │   ├── DroidSans-webfont.woff
    │   ├── FontAwesome.otf
    │   ├── OpenSans-CondLight-webfont.eot
    │   ├── OpenSans-CondLight-webfont.svg
    │   ├── OpenSans-CondLight-webfont.ttf
    │   ├── OpenSans-CondLight-webfont.woff
    │   ├── fontawesome-webfont.eot
    │   ├── fontawesome-webfont.svg
    │   ├── fontawesome-webfont.ttf
    │   ├── fontawesome-webfont.woff
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   ├── sourcesanspro-regular-webfont.eot
    │   ├── sourcesanspro-regular-webfont.svg
    │   ├── sourcesanspro-regular-webfont.ttf
    │   └── sourcesanspro-regular-webfont.woff
    └── stylesheets
        ├── admin.css
        ├── application.css.scss
        ├── bootstrap.css
        ├── font-awesome.min.css
        ├── jquery.bxslider.css
        ├── smoothproducts.css
        └── style.css.scss

in my application.css.scss, I have this:

     *
     *= require_tree .
     *= require_self
     */
    @import 'style';

and in my style.css.scss I have this:

    @font-face {
        font-family: 'open_sanscondensed_light';
        src: url('OpenSans-CondLight-webfont.eot');
        src: url('OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
             url('OpenSans-CondLight-webfont.woff') format('woff'),
             url('OpenSans-CondLight-webfont.ttf') format('truetype'),
             url('OpenSans-CondLight-webfont.svg#open_sanscondensed_light') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'source_sans_proregular';
        src: url('sourcesanspro-regular-webfont.eot');
        src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('sourcesanspro-regular-webfont.woff') format('woff'),
             url('sourcesanspro-regular-webfont.ttf') format('truetype'),
             url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'DroidSansRegular';
        src: url('DroidSans-webfont.eot');
        src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
             url('DroidSans-webfont.woff') format('woff'),
             url('DroidSans-webfont.ttf') format('truetype'),
             url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
        font-weight: normal;
        font-style: normal;

Could someone please help!!

Upvotes: 3

Views: 2472

Answers (2)

Raj
Raj

Reputation: 22926

Read about Rails Asset Pipeline.

Precompile your assets in the 'production' environment

RAILS_ENV=production rake assets:clean assets:precompile

In your CSS, use asset_path helper. Like this:

Instead of 

src: url('sourcesanspro-regular-webfont.eot');

use

src: url(font-path('sourcesanspro-regular-webfont.eot'));

Making this change will add MD5 hashes to your font url. For this to work, you need to include your font's extension (ttf, eot etc) to config.assets.precompile in your configuration file.

Upvotes: 1

PaReeOhNos
PaReeOhNos

Reputation: 4398

In Rails production you need to precompile your assets, which will cause rails to add a fingerprint the each file and put them into the assets folder.

The issue you're having if you've done this, is because you're using the the standard css url in your stylesheets, and that file does not exist in production.

What you need to do if make a few alterations. Firstly, edit your config/environments/production.rb to include the fonts in the pre-compilation stage

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

Then precompile your assets

RAILS_ENV=production rake assets:precompile

Then inside the stylesheet, rails provides font specific URL helpers, so you can do

src: url(font-path('myfont-webfont.eot'))

Upvotes: 6

Related Questions