Web fonts are pretty much all the rage. Using a CDN for font libraries, like TypeKit or Google Fonts, will be a great solution for many projects. For others, this is not an option. Especially when you are creating a custom icon library for your project.
Rails and the asset pipeline are great tools, but Rails has yet to get caught up in the custom web font craze.
As with all things Rails, there is more then one way to skin this cat. There is the recommended way, and then there are the other ways.
Here I will show how to update your Rails project so that you can use the asset pipeline appropriately and resource your files using the common Rails convention.
What we need to do is add the fonts directory within the assets directory so that we can resource these files in our CSS or Sass files using proper rails conventions and the asset pipeline.
The problem is, simply adding a fonts directory isn't picked up by the pipeline. For now, let's just add that in there and then fix the Rails issue next.
The fix is pretty simple. Open your project's config file, located at config/application.rb and add the following line within your Application class:
That seems right, unless you are using the asset pipeline. So to make the path correct we need to make a slight update and replace src:url() with src:font-url(). Our Sass file would look like:
Perfect. Our fonts are in the assets directory where it feels best. Our code is clean and follows all the common Rails conventions. This is the best possible soliton and if you are happy here, do not read the rest of this article. It get's a little weird from here on.
Anything you put into a directory within the assets directory will be carried through the pipeline. So, why not put the fonts directory within the stylesheets directory?
If you are like me, that just feels weird, but I don't judge. If you don't want to or can't create the fonts directory within the assets directory or can't update the application.rb file, you could do something like the following:
This is kind of interesting. Since the fonts directory is in the stylesheets directory, the fonts just come along for the ride. Simply use (asset-path(' ... ')) so that Rails creates the proper path.
What's interesting about this is, since you are putting the fonts directory inside the stylesheets directory, do you really need to use the src:url(asset-path('fonts/icofonts.eot')); method? At this point the fonts are already in the asset pipeline and the following code, although not ideal, hardcoding /assets/ into the path will work.
But ... since the fonts directory is within the stylesheets directory and this is already in the asset pipeline, if you just refer to the fonts in a relative path, that works too. But man, that's just doesn't feel very Rails to me.
Ok, first I have to ask ... WAT? Ok fine, not using Sass, going with good 'ol CSS. Interesting enough, putting the fonts directory is within the stylesheets directory again works and you can simply use the relative path.
We all know that this kind of sucks. So if we wanted to bring the asset pipeline back into play we can't use CSS by itself, we need to add some Ruby juice to this. But how? Yup, make the file name.css.erb, yeah, I said that.
This is very similar to the earlier syntax of src:url(asset-path('fonts/ ... ')); I illustrated earlier, but WOW! css.erb and '<%= ... %>' just causes me a little pain.
You can eliminate this by simply changing any .css file to a .css.scss file and then take full advantage of all the awesome that Sass brings you and not hack Ruby onto plain CSS. Just my $0.02.
Although I am illustrating seemingly clever ways to solve this problem, in the end the best solution really is to update your Rails project and use the asset pipeline as intended. And if you aren't using Sass yet in your project and want to learn, I strongly suggest looking at Sass 101 - A Newb's Guide.
I should also note that many of these hacked techniques I did not test in a development environment with cache busting. Use at your own risk.
Hi Dade I'm having a strange problem. I used the asset-url (testing the font-url now) solution above and I get the right path in production (tomcat8, jruby, warble) yay! except no. The path is correct but the whole mess of numbers that the asset pipeline adds is missing. No clue why font-url is not adding them. Any ideas?
This is beautiful!! The only thing I'm wondering is about how to get the SublimeonSaveBuild to work with it and that when i do build the .css.scss file it outputs a .css.css file which seems weird. Also the my font urls don't look like you suggested for whatever reason.
This is the best possible solution and if you are happy here, do not read the rest of this article. It get's a little weird from here on.
Thank you so much, but I just have to say, what is SO maddening about the asset pipeline is how hard it is to debug. Not sure which Rails Way doctrine I'm missing, but it's always a surprise when I deploy to staging.
Helped me out a ton man, I'm in an enterprise setting where the "RailsGem-font-awesome" had to go through a lengthy security review and complex import process. I needed my icons now and this guide made that happen! Much appreciated!
when trying to start the server (which incidentally it would be good to remind people about), I found I needed to add a similar line to config/initializers/assets.rb instead:
Along with swapping url for font-url in FA's all.css, renaming all.css to all.scss (so that Rails does the preprocessing and actually understands "font-url") and putting the FA font files (EOT, WOFF, etc.) in a font folder (I used vendor/assets/fonts but could have used app/assets/fonts), this all works nicely in development and production.