Rails 4 with font-face

[nybblr]

Using Rails 4 and Bourbon, and some issues have reared their ugly heads. I'm using the font-face mixin:

+font-face(OpenSans, opensans-regular, normal, normal, true)

However, the path generated in the stylesheet is /fonts/opensans-regular... but Rails 4 claims it doesn't exist. I have put all my font files under app/assets/fonts and added:

    config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

to my application.rb. It seems the correct path in rails 4 is now /assets/opensans-regular. Is it possible to redirect fonts to assets, or should Bourbon be using asset-path in the font-face helper instead? Would this break Rails 3 compatibility?
~ Jonathan

[chrism]

I wasn't able to get this working on Rails 4 either.

In the end I've used my own modified mixin that seems to work ok.

Instead of this format:

font-url('font_file_name.extension')

I used this instead...

url(font-path('font_file_name.extension'))

Which allowed me to use /assets/fonts directory.

Might be a useful workaround for someone.

This link was quite helpful, though I didn't need to add anything to my config/application.rb
http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/

Would be great to use bourbon for this instead though. :)

[nybblr]

@chrism that seems strange... font-url used to be equivalent to url(font-path(...)).

Anyone on the Bourbon core team have any thoughts? Has the font-url helper gone south in the latest Sprockets/asset pipeline gems?

[chrism]

@nybblr exactly - it should be.

My guess would be that maybe it is an issue with the asset helpers from the sass-rails gem, but didn't have chance to investigate further.

[nybblr]

@chrism I checked around in sprockets and sass-rails; couldn't directly find the font-url helper. Meantime, I've submitted a pull request #250 with that new syntax, which works for me in Rails 4 as well.

[chrism]

@nybblr OK great - glad you got it working.

[plapier]

hm, I did a fresh install of Rails 4.0.0 and I cannot reproduce the error. The current @font-face mixin is working fine for me.

^ using an icon font, entypo. See the lightning strike icon.

// SCSS
@include font-face(entypo, 'entypo/entypo', $asset-pipeline: true);

// CSS Output
@font-face {
  font-family: entypo;
  font-weight: normal;
  font-style: normal;
  src: url(/assets/entypo/entypo.eot);
  src: url(/assets/entypo/entypo.eot?#iefix) format("embedded-opentype"), url(/assets/entypo/entypo.woff) format("woff"), url(/assets/entypo/entypo.ttf) format("truetype"), url(/assets/entypo/entypo.svg#entypo) format("svg"); }

GEM
  remote: https://rubygems.org/
  specs:
    actionmailer (4.0.0)
      actionpack (= 4.0.0)
      mail (~> 2.5.3)
    actionpack (4.0.0)
      activesupport (= 4.0.0)
      builder (~> 3.1.0)
      erubis (~> 2.7.0)
      rack (~> 1.5.2)
      rack-test (~> 0.6.2)
    activemodel (4.0.0)
      activesupport (= 4.0.0)
      builder (~> 3.1.0)
    activerecord (4.0.0)
      activemodel (= 4.0.0)
      activerecord-deprecated_finders (~> 1.0.2)
      activesupport (= 4.0.0)
      arel (~> 4.0.0)
    activerecord-deprecated_finders (1.0.3)
    activesupport (4.0.0)
      i18n (~> 0.6, >= 0.6.4)
      minitest (~> 4.2)
      multi_json (~> 1.3)
      thread_safe (~> 0.1)
      tzinfo (~> 0.3.37)
    arel (4.0.0)
    atomic (1.1.10)
    bourbon (3.1.8)
      sass (>= 3.2.0)
      thor
    builder (3.1.4)
    coffee-rails (4.0.0)
      coffee-script (>= 2.2.0)
      railties (>= 4.0.0.beta, < 5.0)
    coffee-script (2.2.0)
      coffee-script-source
      execjs
    coffee-script-source (1.6.3)
    erubis (2.7.0)
    execjs (1.4.0)
      multi_json (~> 1.0)
    hike (1.2.3)
    i18n (0.6.4)
    jbuilder (1.5.0)
      activesupport (>= 3.0.0)
      multi_json (>= 1.2.0)
    jquery-rails (3.0.4)
      railties (>= 3.0, < 5.0)
      thor (>= 0.14, < 2.0)
    json (1.8.0)
    mail (2.5.4)
      mime-types (~> 1.16)
      treetop (~> 1.4.8)
    mime-types (1.23)
    minitest (4.7.5)
    multi_json (1.7.7)
    neat (1.3.0)
      bourbon (>= 2.1)
      sass (>= 3.2)
    polyglot (0.3.3)
    rack (1.5.2)
    rack-test (0.6.2)
      rack (>= 1.0)
    rails (4.0.0)
      actionmailer (= 4.0.0)
      actionpack (= 4.0.0)
      activerecord (= 4.0.0)
      activesupport (= 4.0.0)
      bundler (>= 1.3.0, < 2.0)
      railties (= 4.0.0)
      sprockets-rails (~> 2.0.0)
    railties (4.0.0)
      actionpack (= 4.0.0)
      activesupport (= 4.0.0)
      rake (>= 0.8.7)
      thor (>= 0.18.1, < 2.0)
    rake (10.1.0)
    rdoc (3.12.2)
      json (~> 1.4)
    sass (3.2.10)
    sass-rails (4.0.0)
      railties (>= 4.0.0.beta, < 5.0)
      sass (>= 3.1.10)
      sprockets-rails (~> 2.0.0)
    sdoc (0.3.20)
      json (>= 1.1.3)
      rdoc (~> 3.10)
    sprockets (2.10.0)
      hike (~> 1.2)
      multi_json (~> 1.0)
      rack (~> 1.0)
      tilt (~> 1.1, != 1.3.0)
    sprockets-rails (2.0.0)
      actionpack (>= 3.0)
      activesupport (>= 3.0)
      sprockets (~> 2.8)
    sqlite3 (1.3.7)
    thor (0.18.1)
    thread_safe (0.1.2)
      atomic
    tilt (1.4.1)
    treetop (1.4.14)
      polyglot
      polyglot (>= 0.3.1)
    turbolinks (1.3.0)
      coffee-rails
    tzinfo (0.3.37)
    uglifier (2.1.2)
      execjs (>= 0.3.0)
      multi_json (~> 1.0, >= 1.0.2)

PLATFORMS
  ruby

DEPENDENCIES
  bourbon
  coffee-rails (~> 4.0.0)
  jbuilder (~> 1.2)
  jquery-rails
  neat
  rails (= 4.0.0)
  sass-rails (~> 4.0.0)
  sdoc
  sqlite3
  turbolinks
  uglifier (>= 1.3.0)

[fny]

Make sure you run RAILS_ENV=production bundle exec rake assets:precompile

[jessieay]

@plapier I was having some issues with some fonts with Rails 4 on Heroku and the changes in this PR https://github.com/thoughtbot/bourbon/pull/250/files helped me fix them - + 1 for me on that guy!

[plapier]

Update: Although this works, you should follow the guide below.

---

Just an update. I recently pushed a project to heroku where the fonts failed.

I have the fonts in /vendor/fonts/ss-standard/

I was able to get the fonts to precompile by adding the following to config/application.rb

  config.assets.precompile += ["ss-standard/ss-standard.ttf",
                         "ss-standard/ss-standard.eot",
                         "ss-standard/ss-standard.svg",
                         "ss-standard/ss-standard.woff"]

I was then able to see that they successfully precompiled when I pushed to heroku.

Resource: https://coderwall.com/p/1uqvkq

[plapier]

After some extensive testing, here's what I've concluded.

• Do not put font files in vendor/assets/fonts
• Put all font files in app/assets/fonts/

Rails 3.1 & 4 @font-face setup

1. All font files should be placed in app/assets/fonts.

• You should place all fonts in app/assets/fonts/ as they WILL get precompiled in staging and production by default—they will get precompiled when pushed to heroku.
• 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.
• Font files placed in vendor/ will NOT be precompiled on staging or production by default—they will fail on heroku. Source

2. Use the @font-face mixin

• For the $font-family name, do not use spaces:
  • Good: CheckoutSans
  • Bad: Checkout Sans
• For the $file-path, do not include a leading forward slash:
  • Good: 'checkoutsans/checkoutsans-webfont'
  • Bad: '/checkoutsans/checkoutsans-webfont'
• Set the $asset-pipeline variable to true

Format:

@include font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false);

Example:

@include font-face(CheckoutSans, 'checkoutsans/checkoutsans-webfont', $asset-pipeline: true);
@include font-face(CheckoutSans, 'checkoutsans-bold/checkoutsans-bold-webfont', $weight: 700, $asset-pipeline: true);
@include font-face(CheckoutSans, 'checkoutsans-light/checkoutsans-light-webfont', $weight: 300, $asset-pipeline: true);

3. Add the rails_12factor gem to your gemfile

• To serve assets in production on heroku, you'll need the rails_12factor gem. Heroku source
• Restart your app.

group :staging, :production do
  gem 'rails_12factor'
end

4. Deploy to heroku

• The fonts should be working locally. Make sure you set the font-family to use your new font.

h1 {
  font-family: CheckoutSans;
}

• If the fonts work locally, push to heroku.
• The fonts will show up in web-inspector's resources panel when they've successfully loaded on the page where the h1 is located.

[plapier]

Closing this issue for now.

[jjb]

@plapier epic how-to, thanks!

[jessieay]

@plapier thank you for all of your hard work and excellent screen-shot-ing! 🍌

[jhilden]

I strongly believe that putting vendor fonts into vendor/assets/fonts makes a lot more sense than putting them into app/assets/fonts. With these 2 lines of extra configuration this has worked well for me (on Rails 4):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

I'm also using that config for my icon font gem: https://github.com/railslove/fontello_rails_converter

[dnlmzw]

@jhilden could you elaborate a little bit on why this makes more sense?

[jhilden]

@dnlmzw any vendored assets (= an asset you take from a vendor without any modification) should go into the vendor directory if possible in my opionion. Only assets that you maintain yourself (e.g. svg icon fonts) should go into the app directory.

[dnlmzw]

@jhilden thanks. Had seen this pattern before, but just wanted to have a clear understanding.

[elizabrock]

@plapier Thanks for the excellent how-to! It's remains super useful!

[lifeiscontent]

@plapier I think this issue still exists in Proteus for Middleman. Any ideas how to fix?

Update: middleman/middleman-sprockets#121

[akashdevaraju]

@plapier Thanks a bunch! This worked for me today.