5

I love the asset pipeline but for the life of me I cannot get it to serve my fonts. I wasted hours googling and trying SO solutions (nope, nope, nope).

Instead I created /public/fonts, dropped all my fonts in there and reference them with url('/fonts/myAwesomeFont.ttf'). Everything works perfectly.

Is there a downside to this approach?

Are font files compressed in asset pre-compilation?

Community
  • 1
  • 1
RSG
  • 7,013
  • 6
  • 36
  • 51
  • any directory you create inside of `app/assets` will be scanned so no need to place your fonts directly inside of the `public/fonts`. To prove it run this command in your console `Rails.application.config.assets.paths`. When you precompile assets, those fonts from app/fonts will be compressed and placed into `public/assets/fonts`. – rhodee Feb 29 '12 at 20:09
  • @rhodee are you sure font files are compressed? From what I read in the RoR Asset Pipeline Guide "The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets", it should not compress other files. – Aldo 'xoen' Giambelluca Feb 29 '12 at 20:15
  • @rhodee - moving my fonts directory into assets causes all the references to break in development. They might still work in prod, and maybe there's a helper to look up where they are by environment or something, but so far there's no compelling reason for me to move them. – RSG Feb 29 '12 at 20:46

4 Answers4

6

We keep our fonts in the /app/assets/fonts folder and to my recollection we did not have to do any additional configuration.

You do however have to use the asset_path helper in your CSS files when you reference the fonts (same as when referencing asset pipeline images in CSS). This requires changing your file extension from .css to .css.erb. It's hard to tell for certain from your description but I'm guessing that may be the problem.


Example

We use the Museo500 font in our app and store it in app/assets/fonts:

app/assets/fonts:
  - museo700-regular-webfont.eot
  - museo700-regular-webfont.woff
  - museo700-regular-webfont.ttf
  - museo700-regular-webfont.svg

The @font-face declaration is as follows:

@font-face {
    font-family: 'Museo700';
    src: url('<%= asset_path "museo700-regular-webfont.eot" %>');
    src: url('<%= asset_path "museo700-regular-webfont.eot" %>?#iefix') format('embedded-opentype'),
         url('<%= asset_path "museo700-regular-webfont.woff" %>') format('woff'),
         url('<%= asset_path "museo700-regular-webfont.ttf" %>') format('truetype'),
         url('<%= asset_path "museo700-regular-webfont.svg" %>#Museo700') format('svg');
    font-weight: normal;
    font-style: normal;

}


Benefits of using asset pipeline for binary files

We don't do any kind of precompilation for image or font assets (I guess you could gzip the fonts or something but we don't) but I still see a benefit to hosting them through the asset pipeline: uniformity and convention. With Rails convention can offer all kinds of benefits.

Ex: At some point you may want to use a CDN like Amazon Cloudfront and will need to make all your asset urls in production point to the CDN copies. If you're hosting all your assets including fonts and images through the asset pipeline that change is as easy changing the asset_host in your production.rb file by uncommenting the lines:

  # Enable serving of images, stylesheets, and JavaScripts from an asset server
  # config.action_controller.asset_host = "http://assets.example.com"

If you're already referencing your fonts with the asset_path helper then those urls will be updated automatically to point to the CDN. I guess it's as much a benefit of using path_helpers as the asset pipeline itself, but either way it's beneficial.

Hope this helps!

jshkol
  • 1,777
  • 14
  • 19
  • Thanks for the code sample and the explanation. The CDN example makes sense too as to why this is best practice. Do you add an .erb extension onto your CSS? using the above on my local (Rails 3.2 on foreman, stylez.css.scss) passes the <%= asset_path %> calls through as text. – RSG Mar 01 '12 at 01:26
  • Yes, sorry. Forgot to mention you need to change to .css.erb. – jshkol Mar 01 '12 at 01:29
  • Does this mean you have to forego the delights of Sass? – RSG Mar 01 '12 at 01:44
  • Nope that would be a dealbreaker for me, .scss.erb works fine as well. – jshkol Mar 01 '12 at 04:13
  • 4
    Note that to host fonts with a CDN, that CDN must support the `Access-Control-Allow-Origin` HTTP header (Amazon S3 does not) or else Firefox and IE users will be unable to load the fonts due to a same-origin domain policy. – stereoscott Jul 19 '12 at 10:17
  • @StereoInteractive.com we actually use S3/CloudFront for our CDN and haven't had any trouble. To reduce roundtrips we embed the font files in our CSS using data-urls (pretty easy with SASS/Asset Pipeline) and use a custom domain (cdn.rentobo.com) for the CDN so maybe one those strategies sidesteps the same-origin issue. – jshkol Jul 19 '12 at 21:34
0

Here is a good solution I found online:

http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline

Tim Arnold
  • 8,359
  • 8
  • 44
  • 67
0

My answer to the first question is...I don't know

Font files should not be compressed by the Rails assets pipeline, CSS and JS are compressed and images can be compressed using 3rd part gems like sprockets-image_compressor.

Aldo 'xoen' Giambelluca
  • 12,075
  • 7
  • 33
  • 39
0

Nothing wrong with it at all. The biggest advantage to the Asset Pipeline is keeping your JS and CSS, which are code, organized like source code. On deployment, your code is packaged up in a different format in /public, suitable for public consumption.

Any compression that happens should be handled by the web server.

aceofspades
  • 7,568
  • 1
  • 35
  • 48