Use SASS's asset-url helper instead of font-url

[timothyrobb]

font-url will only generate paths to the "assets/" directory, however it will not include any cache-busting timestamps from the asset pipeline.

SASS has the asset-url helper to do just this.

See:
http://stackoverflow.com/questions/8334573/asset-path-in-scss-file-rails#answer-8663533
http://rubydoc.info/github/petebrowne/sprockets-sass/master/Sprockets/Sass/Functions#asset_url-instance_method

[timothyrobb]

Don't mind my dumb. I was not compiling my assets for production when testing production caching. No fork/PR needed.
My apologies.

[lwe]

no problem :)

[chengguangnan]

Hi @iwe,

I don't understand why @timothyrobb closed this ticket. I'm having the same problem.

In production, the fonts may digest to something like entypo-4a74efb3ed26fe0c57556bcc0b7e871f.eot. Meanhwile it's just entypo.eot in the CSS file. Therefore the font is not loaded.

I think we should use asset-url().

[lwe]

can you confirm that using asset-url works as expected? basically, font-url is a helper like asset-url which returns the correct digested URL paths. What rails/sass version are you using?

[chengguangnan]

Yes. My problem fixed by creating a entypo-fonts.css.scss file with the code that timothyrobb provided.

I'm using rails (4.0.1) and sass (3.2.12).

https://github.com/lwe/entypo-rails/blob/e8e5e17d91c047b59570d5bb989d0231fb1f7eef/app/assets/stylesheets/entypo-fonts.css.scss

[timothyrobb]

@guangnan As I said, when I was compiling my assets, I didn't compile them using the correct environment.
E.G, if I ran my server in production env by doing rails s -e production or RAILS_ENV=production rails s, then when testing precompiled assets, you have to compile them as RAILS_ENV=production rake assets:precompile.

Not compiling your assets for production when running in production is generally A Bad Thing to do.
While using asset-url() would help with this edge case, it's root cause is of the developer, not the gem.

[lwe]

@timothyrobb thanks for the help, in fact I tested it with asset-url and still had the same problem, when not setting the correct env during assets:precompile - guess I'll need to add a FAQ to explain these common pitfalls 😄

[timothyrobb]

@lwe Yeah, that sounds like a great idea :) Sorry for all the hassle. It's such a simple mistake to make too. Goddamn Rails and it's environment fragmentation.

[chengguangnan]

I'm using the correct environment. My problem is not related to environment.

If you have assets digest set to true, then not using asset-url will make the font not been loaded.

config.assets.digest = true

[lwe]

@guangnan I cannot confirm this actually (checked it on one of our rails apps) and we are using the same sass/rails version. Could you create a sample rails app where the issue is present?

@timothyrobb haha, no worries there, the asset pipeline sometimes is indeed a very frustrating experience - or just a bit too much of a blackbox/different variables that come into play etc. etc.

[timothyrobb]

@guangnan Just out of curiosity, did you try compiling with the production env set?

[lwe]

1. checked out entypo-rails locally (well I already have it locally)
2. changed app/assets/stylesheets/entypo-fonts.css.scss to use asset-path
3. changed the Gemfile in my rails app to use path: '/path/to/local/entypo-rails'
4. run bundle install in my rails app

Test 1: running asset precompile without RAILS_ENV variable

rm -rf public/assets
rake assets:precompile

the application-....css contains URLs without digests -> fail, even with asset-path

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

Test 2: running precompile with RAILS_ENV

rm -rf public/assets
RAILS_ENV=production rake assets:precompile

success, the application-....csss containts URLs with digests, actually it also contains digests with font-url, because according to sass-rails docs, font-url($path) is a simple alias to asset-url($path, font).

@charset "UTF-8";@font-face{font-family:'entypo';src:url(/assets/entypo-4a74efb3ed26fe0c57556bcc0b7e871f.eot);src:url(/assets/entypo-4a74efb3ed26fe0c57556bcc0b7e871f.eot?#iefix) format("embedded-opentype"),url(/assets/entypo-ea098060e3c759d8a165d73d4e8955b1.woff) format("woff"),url(/assets/entypo-6a0567ea4a7430cb28b96bf7b002142c.ttf) format("truetype"),url(/assets/entypo-cddf3f136885fb2eccb1d6cc8a015583.svg#entypo) format("svg");font-weight:normal;font-style:normal}

[chengguangnan]

Okay. I start to know what's going on here. You guys are been right. Thanks!

By change font-url to asset-url, I activated a new production deploy, which removed previous old development assets. That's why I thought it fixed the problem.

Thanks...

[lwe]

No problem, FYI added a troubleshooting section, feel free to improve https://github.com/lwe/entypo-rails#troubleshooting