Rails 4 Font is not loading in SCSS

Question

I know this is old question but I have been digging my head from many hours. Gone through all the links of SO but still unable to resolve this issue.

My fonts are in fonts directory which is present in assets directory. If i try to use asset-url it give me error saying Barrio font not found while my fonts is in the directory.

# application.rb
config.assets.paths << "#{Rails.root}/app/assets/fonts"
config.assets.precompile += %w( .otf )

# style.scss
@font-face {
  font-family: "Barrio-Regular";
  src: asset-url("Barrio-Regular.otf");
}

.catagories-list {
  label {
    font-family: "Barrio-Regular, Arial, Helvetica, sans-serif";
    font-size: 18px;
  }
  li {
    a {
      color: #2c2c2c;
    }
    margin-bottom: 10px;
    text-indent: 20px;
    &.active a {
      text-decoration: underline;
      color: #2f2993;
    }
  }
}

@Iceman AFAIK in Rails 4 there's no more font-url or it's deprecated. — Mike Szyndel, May 15 '14 at 21:33

score 0 · Answer 1 · edited May 23 '17 at 12:21

I think the error will be caused by this line:

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

How will this handle if your app is precompiling the assets (where all the assets get put in the public folder)?

We typically do this:

#app/assets/stylesheets/layout/fonts.css.sass
@font-face
    font:
        family: 'Ionicons'
        weight: normal
        style: normal
    src: asset_url('layout/fonts/IonIcons/ionicons.eot?v=1.4.1')
    src: asset_url('layout/fonts/IonIcons/ionicons.eot?v=1.4.1#iefix') format('embedded-opentype'), asset_url('layout/fonts/IonIcons/ionicons.ttf?v=1.4.1') format('truetype'), asset_url('layout/fonts/IonIcons/ionicons.woff?v=1.4.1') format('woff'), asset_url('layout/fonts/IonIcons/ionicons.svg?v=1.4.1#Ionicons') format('svg')

Basically, putting all our fonts in the #app/assets/stylesheets/layouts/fonts directory

Having looked at some resources, I would recommend this:

With the fonts placed in app/assets/fonts/, you will NOT need to add or edit anything in application.rb, production.rb or staging.rb.

#app/assets/stylesheets/application.css.scss
@font-face {
    font-family: 'Barrio-Regular'
    src: asset_url('Barrio-Regular.otf')
}

If you do that without altering your application.rb, please come back with what the system responds with

Rails 4 Font is not loading in SCSS

1 Answers1