CODEWITHSUNDEEP
ruby-on-railsasset-pipeline
reknirt
reknirt

Reputation: 2254

Fonts/stylesheets not loading in Rails production

I have a Rails 4 app that I just deployed to ninefold. None of the stylesheets or fonts are rendering.

In my assets folder I have layout/fonts/*all-my-font-files

Then in `social.css.scss' I have:

@import '/layout/fonts';

@font-face {
font-family: 'Mono Social Icons Font';
src: asset_url('MonoSocialIconsFont-1.10.eot');
src: asset_url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
     asset_url('MonoSocialIconsFont-1.10.woff') format('woff'),
     asset_url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
     asset_url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: asset_url('MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

Is this correct?

Upvotes: 0

Views: 107

Answers (2)

nikolayp
nikolayp

Reputation: 17919

application.rb

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

in assets/fonts put your font with the following extensions (font could be converted on http://www.font2web.com/)

.eot
.otf
.svg
.ttf
.woff

assets/stylesheets/application.css.scss

@mixin font-face($family, $url-without-ext, $font-weight: normal, $font-style: normal) {
  @font-face {
    font-family: "#{$family}";
    src: font-url("#{$url-without-ext}.eot");
    src: font-url("#{$url-without-ext}.eot?#iefix") format("embedded-opentype"),
    font-url("#{$url-without-ext}.woff") format("woff"),
    font-url("#{$url-without-ext}.ttf") format("truetype"),
    font-url("#{$url-without-ext}.svg##{$family}") format("svg");
    font-weight: $font-weight;
    font-style: $font-style;
  }
}
# then include you fonts (for example)
@include font-face("Arsis", "Arsis");
@include font-face("Georgia", "Georgia");

then it could be used in css

font-family: "Georgia";

(Just a day ago i've tested it on Rails 4.0.3 production, everything works fine!)

Upvotes: 1

joshua.paling
joshua.paling

Reputation: 13952

Rather than asset_url, use font-url

You shouldn't need this: @import '/layout/fonts';

Just something like:

@font-face {
    font-family: 'Mono Social Icons Font';
    src: font-url('MonoSocialIconsFont-1.10.eot');
    src: font-url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
         font-url('MonoSocialIconsFont-1.10.woff') format('woff'),
         font-url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
         font-url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
    src: font-url('MonoSocialIconsFont-1.10.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Upvotes: 1

Related Questions