Using fonts with Rails asset pipeline

Question

I have some fonts being configured in my Scss file like so:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

The actual font file are stored in /app/assets/fonts/

I have added config.assets.paths << Rails.root.join("app", "assets", "fonts") to my application.rb file

and the compile CSS source is as follows:

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

But when I run the app the font files are not being found. The logs:

Started GET "/assets/icoMoon.ttf" for 127.0.0.1 at 2012-06-05 23:21:17 +0100 Served asset /icoMoon.ttf - 404 Not Found (13ms)

Why isn't the asset pipeline flattening the font files down into just /assets?

Any ideas people?

Kind regards, Neil

Extra info:

When checking the rails console for assets paths and assetprecompile I get the following:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

Tridentine

You have font-url helper in SCSS in Rails. – Benzel

That doesn't make any difference unfortunately. Therefore my question still stands – Tridentine

I wrote a generic way to diagnose and solve this problem at https://mcmap.net/q/93980/-rails-4-why-are-fonts-not-loading-in-production. – Evslin

See my answer. You need a few more steps. (rename your css into css.scss, use font-for, edit your initialiser for assets and also run rails assets:precompile when deploying etc). – Delayedaction

Answer 1

1. If your Rails version is between > 3.1.0 and < 4, place your fonts in any of the these folders:

   • app/assets/fonts
   • lib/assets/fonts
   • vendor/assets/fonts

   
   

   For Rails versions > 4, you must place your fonts in the app/assets/fonts folder.

   Note: To place fonts outside of these designated folders, use the following configuration:

   config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

   For Rails versions > 4.2, it is recommended to add this configuration to config/initializers/assets.rb.

   However, you can also add it to either config/application.rb , or to config/production.rb

2. Declare your font in your CSS file:

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

   Make sure your font is named exactly the same as in the URL portion of the declaration. Capital letters and punctuation marks matter. In this case, the font should have the name icomoon.

3. If you are using Sass or Less with Rails > 3.1.0 (your CSS file has .scss or .less extension), then change the url(...) in the font declaration to font-url(...).

   Otherwise, your CSS file should have the extension .css.erb, and the font declaration should be url('<%= asset_path(...) %>').

   If you are using Rails > 3.2.1, you can use font_path(...) instead of asset_path(...). This helper does exactly the same thing but it's more clear.

4. Finally, use your font in your CSS like you declared it in the font-family part. If it was declared capitalized, you can use it like this:

   font-family: 'Icomoon';
   

Conceptualism

and unfortunately, neither did this. I'm really confused. – Tridentine

Did you restart your server? – Conceptualism

Yep, This is why i'm really confused! Can't think of anything else that could be causing it. The compiled url in the css source is pointing to /assets/fontname but the font file itself just can;t be located at that directory. It seems like the asset pipeline just isn;t flattening them down into just /assets as it should be. – Tridentine

Perfect.Working perfectly now. Just altered the @font-face syntax to use font-url and all is great. Thanks for the help! – Tridentine

If I'm reading the source correctly, then Less also has the font-url(...) helper! In any case, you could always give your css file the extensions .less.erb and then you'd be able to use the previously mentioned trick url('<%= asset_path(...) %>'). – Conceptualism

for me, the naming convention of fontname and respective file names was the issue. Really took my 30+hrs and i was ignoring this convention each time – Mercia

I had to remove the configs set in step 2 in order for this to work on my setup. I guess sass-rails does the needed magic. – Copolymerize

@NadeemYasin Thanks for your comment, I had the same problem. The file names had hypens in them and when I removed that the solutions proposed here worked. – Painterly

font-url didn't work for me, I had to use asset_path . I suspect it's because of the anchors like #iefix at the end - font-url would compile down to url(...), but leave out the quotes around the filename. – Katekatee

config.assets.precompile += %w( .svg .eot .woff .ttf ) is actually wrong, you need to add to precompile something that matches the full asset name. A regexp worked for me: config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ – Humidifier

Well, the way it is now works for me. So either that line of code is not needed at all or the way to set this config depends on the Rails version (or something else). @Copolymerize had already said that he had to remove the configs on step 2 so maybe we're missing something here. Man, it should be simpler to use fonts with the asset pipeline. – Conceptualism

Step 2 should be removed. According to Rails Guides, config.assets.paths is for Sprockets references, not relevant here. config.assets.precompile is also useless because "The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (this will include all image assets automatically) from app/assets folders" (see here) – Alexine

config.assets.paths is relevant for coding links to assets. As for config.assets.precompile, it can be still needed in Rails 3. Compare the Rails 4 guide to the Rails 3 guide. However, since the way I used precompile is wrong (as people have pointed out), maybe it's not really needed. – Conceptualism

@Conceptualism I also discovered that restarting my server was the trick! – Pilocarpine

Also make sure the scaffold.css.scss (if you have one) isn't overriding things with its font declarations. – Q

@Alex: because %w() returns an array of strings and precompile accepts strings only for full paths, not partial matches. – Humidifier

I'm using .scss extension and the font-url trick, I cleared my browser cache and restarted my server, but my css kept requesting fonts/myfontname.ttf instead of assets/..., where I know the font is actually compiling to. No scaffolds.css.scss file. I even tried rake assets:clobber but got no effect, until I restarted my server a second time (after the command). It worked! Thanks! – Aegean

In step 2, why is there two src: properties declared, rather than once with all of the files comma-separated? Does it matter? – Registrar

I don't know the exact details, because that @font-face syntax comes straight from IcoMoon's app, but here's a CSS Tricks blog post that kind of covers it. – Conceptualism

Looks like there might still be some confusion about this, maybe it also matters which Rails.env you are in. In development, I can confirm that with Rails 4.2, and using sass-rails 5.0.1, I needed to use asset-url rather than font-url in the .scss file to get a /assets/ absolute path in my CSS, and I did not need to add fonts/ to my config.assets.path – Radiative

It is important to note that you must name your file with the extension .css.scss - .scss may work for everything else, but will not work here. – Tavey

We recently migrated an app from Rails 3 to 4, and needed fonts from an engine to digest properly with the asset pipeline. The accepted answer works fine, but should be using font-path (or font-url) helpers instead of hardcoding the path in. – Filmore

@Conceptualism I have kind of similar problem but nothing worked I put a question at #36884726 , have a look please – Deposition

Prior to seeing this answer I spent at least 3 hours to solve this problem... Thank you man!.. – Jurisprudence

This is by far the best answer! – Fickle

Answer 2

Now here's a twist:

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.

Font files placed in vendor/assets will NOT be precompiled on staging or production by default — they will fail on heroku. Source!

— @plapier, thoughtbot/bourbon

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)$/

— @jhilden, thoughtbot/bourbon

I've also tested it on rails 4.0.0. Actually the last one line is enough to safely precompile fonts from vendor folder. Took a couple of hours to figure it out. Hope it helped someone.

Civility

+1 edgeguides.rubyonrails.org/… explains the layout of the asset pipeline and helps understand how this works. Correct as of 2014-07-04 – Grassi

Do you need both of these? app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts') app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ A comment on another answer says the latter takes care of both. – Registrar

Even in Rails 4.2+-land, I really think that app/assets input to sprockets and friends processed as output public/assets, whereas vendor/assets can still be useful to deploy assets without modification; both have their use-cases. The whole convention of vendoring is premised on the guarantee that nothing will happen to vendor/*. (Yes, vendor/plugins was abused with code-hoarding, closed-source mania pre gem era and folks just copy-pasted unversioned js into vendor/assets/javascripts pre-bower/rails-assets.) – Byronbyrum

For those wondering; throw this in config/initializers/assets.rb – Djambi

Answer 3

You need to use font-url in your @font-face block, not url

@font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

as well as this line in application.rb, as you mentioned (for fonts in app/assets/fonts

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

Touch

you also need to enable precompilation for production – Registrar

On a brand new rails 4.2 app, both src: url(someFont.ttf) and src: font-url(someFont.ttf) worked when having files in app/assets/fonts. I have .scss extensions by default. I did not need to add to the config.assets.paths. – Gown

Answer 4

If you don't want to keep track of moving your fonts around:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

Offenbach

I think this is the best solution; unless you authored the fonts they probably belong in /vendor/assets/fonts -- not /app/assets/fonts. This approach solves for both, the above does not – Tarazi

@Casey: this solution does let you put fonts inside vendor/assets. @Nathan Colgate: This can be simplified to: config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ – Humidifier

@Humidifier - I know, that's why I think it's better than the accepted answer – Tarazi

Also you should end your regex with \Z -- #578153 – Tarazi

How do you deal with the hashes that Rails appends to the font file? – Euraeurasia

Note that this will also not precompile actual svg image/artwork files, which may be a bad thing... – Eupheemia

@Sunny, so doing also takes care of adding paths as well as enabling precompiling? – Registrar

@gwho: This adds these file names to the list of precompileable paths. As for precompiling you still need to call it when you deploy with rake assets:precompile – Humidifier

oh so registering paths and registering it to be available for precompilation weren't two different things. – Registrar

Answer 5

Here my approach to using fonts in asset pipeline:

1) Put all your font file under app/assets/fonts/, actually you are not restricted to put it under fonts folder name. You can put any subfolder name you like. E.g. app/assets/abc or app/assets/anotherfonts. But i highly recommend you put it under app/assets/fonts/ for better folder structure.

2) From your sass file, using the sass helper font-path to request your font assets like this

@font-face {
    font-family: 'FontAwesome';
    src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
    src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
         url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
         url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
         url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
         url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

3) Run bundle exec rake assets:precompile from your local machine and see your application.css result. You should see something like this:

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

If you want to know more how asset pipeline work, you can visit the following simple guide: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

Necrophilia

Answer 6

Here is a repo the demonstrates serving a custom font with Rails 5.2 that works on Heroku. It goes further and optimizes serving the fonts to be as fast as possible according to https://www.webpagetest.org/

https://github.com/nzoschke/edgecors

To start I picked pieces from answers above. For Rails 5.2+ you shouldn't need extra asset pipeline config.

Asset Pipeline and SCSS

• Place fonts in app/assets/fonts
• Place the @font-face declaration in an scss file and use the font-url helper

From app/assets/stylesheets/welcome.scss:

@font-face {
  font-family: 'Inconsolata';
  src: font-url('Inconsolata-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Inconsolata";
  font-weight: bold;
}

Serve from CDN with CORS

I'm using CloudFront, added with the Heroku Edge addon.

First configure a CDN prefix and default Cache-Control headers in production.rb:

Rails.application.configure do
  # e.g. https://d1unsc88mkka3m.cloudfront.net
  config.action_controller.asset_host = ENV["EDGE_URL"]

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=31536000'
  }
end

If you try to access the font from the herokuapp.com URL to the CDN URL, you will get a CORS error in your browser:

Access to font at 'https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf' from origin 'https://edgecors.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. edgecors.herokuapp.com/ GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net::ERR_FAILED

So configure CORS to allow access to the font from Heroku to the CDN URL:

module EdgeCors
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.middleware.insert_after ActionDispatch::Static, Rack::Deflater

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource "*", headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

Serve gzip Font Asset

The asset pipeline builds a .ttf.gz file but doesn't serve it. This monkey patch changes the asset pipeline gzip whitelist to a blacklist:

require 'action_dispatch/middleware/static'

ActionDispatch::FileHandler.class_eval do
  private

    def gzip_file_path(path)
      return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
      gzip_path = "#{path}.gz"
      if File.exist?(File.join(@root, ::Rack::Utils.unescape_path(gzip_path)))
        gzip_path
      else
        false
      end
    end
end

The ultimate result is a custom font file in app/assets/fonts served from a long-lived CloudFront cache.

Judgemade

Answer 7

I was having this problem on Rails 4.2 (with ruby 2.2.3) and had to edit the font-awesome _paths.scss partial to remove references to $fa-font-path and removing a leading forward slash. The following was broken:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

And the following works:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

An alternative would be to simply remove the forward slash following the interpolated $fa-font-path and then define $fa-font-path as an empty string or subdirectory with trailing forward slash (as needed).

Remember to recompile assets and restart your server as needed. For example, on a passenger setup:

prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart

Then reload your browser.

Thermo

Answer 8

I'm using Rails 4.2, and could not get the footable icons to show up. Little boxes were showing, instead of the (+) on collapsed rows and the little sorting arrows I expected. After studying the information here, I made one simple change to my code: remove the font directory in css. That is, change all the css entries like this:

src:url('fonts/footable.eot');

to look like this:

src:url('footable.eot');

It worked. I think Rails 4.2 already assumes the font directory, so specifying it again in the css code makes the font files not get found. Hope this helps.

Mines

Did you try to asset:precompile and then run this in production?.My guess this will only work in dev mode (and not after the assets precompile has run for production) – Delayedaction

Answer 9

I had a similar issue when I upgraded my Rails 3 app to Rails 4 recently. My fonts were not working properly as in the Rails 4+, we are only allowed to keep the fonts under app/assets/fonts directory. But my Rails 3 app had a different font organization. So I had to configure the app so that it still works with Rails 4+ having my fonts in a different place other than app/assets/fonts. I have tried several solutions but after I found non-stupid-digest-assets gem, it just made it so easy.

Add this gem by adding the following line to your Gemfile:

gem 'non-stupid-digest-assets'

Then run:

bundle install

And finally add the following line in your config/initializers/non_digest_assets.rb file:

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

That's it. This solved my problem nicely. Hope this helps someone who have encountered similar problem like me.

Signalman

This answer adds a gem for no reason. The default asset pipeline is fine. You just need to extend the app/initialisers/assets.rb (see my answer). Also you lose the ability to update the font once this is deployed to production (no digest) – Delayedaction

Answer 10

In my case the original question was using asset-url without results instead of plain url css property. Using asset-url ended up working for me in Heroku. Plus setting the fonts in /assets/fonts folder and calling asset-url('font.eot') without adding any subfolder or any other configuration to it.

Geronto

Answer 11

If you have a file called scaffolds.css.scss, then there's a chance that's overriding all the custom things you're doing in the other files. I commented out that file and suddenly everything worked. If there isn't anything important in that file, you might as well just delete it!

Spurn

Answer 12

Put your font files (woff, woff2, eot, ttf, ...) in /app/assets/fonts directory.

Then add following to your config/initializers/assets.rb :

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

In above answers woff2 was not included (and for future ref, you might need to add other extensions by just adding a |{font-file-extension} here)

Using the font in you css file:

Important you need to rename it from stylesheet.css into stylesheet.css.scss (this for the font-url to do its work and transform the url of the font in production correctly after asset precompile):

@font-face {
  font-family: 'MyFont'
  src: font-url('myfont.woff') format('woff');
}

body{
  font-family: 'MyFont'
}

And then run:

rails assets:precompile

After running assets precompile your font file is copied from app/assets/fonts/myfont.woff into the public/assets/myfont-{SOME_DIGEST_KEY}.woff location. And now the above css just works also in production much like image assets.

You can also see that after the precompile assets command an application-{somedigest}.css is created and inside you will see the @font-face but there our font-url('myfont.woff') will be transformed into url(/assets/myfont.woff-{SOME_DIGEST_KEY}.woff) now and the digest matches the one that the file was moved to. That way updating your font files also bust the browser cache properly etc.

Make sure your nginx is also serving the public/assets folder for better performance. This was tested with rails 5 and rails 6 in production. It should also work with rails 4 most likely.

Delayedaction

Answer 13

just place your fonts inside app/assets/fonts folder and set the autoload path when app start using writing the code in application.rb

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

then use the following code in css.

@font-face {

 font-family: 'icomoon';
 src: asset-url('icomoon.eot');
 src: asset-url('icomoon.eot') format('embedded-opentype'),
      asset-url('icomoon.woff') format('woff'),
      asset-url('icomoon.ttf') format('truetype'),
      asset-url('icomoon.svg') format('svg');
 font-weight: normal;
 font-style: normal;

}

Give it a try.

Thanks

Largescale

How does this add anything over the existing answers? – Mall