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.
The recommended way
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.
The default asset pipeline
When looking in your project's
assets directory, you would see the following:
What we need to do is add the
fonts directory within the
assets directory so that we can resource these files in our
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.
Updating the asset pipeline
The fix is pretty simple. Open your project's config file, located at
config/application.rb and add the following line within your
config.assets.paths << Rails.root.join("app", "assets", "fonts")
BOOM! Now Rails is smart enough to know what to do with assets within the
Fonts path in your Sass
Default CSS that you will get from sites like icomoon.io will typically look something like this:
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:font-url(). Our Sass file would look like:
When the Sass is rendered into CSS, you should see something like the following:
src: url(/assets/icofonts.eot?#iefix) format("embedded-opentype"),
Perfect. Our fonts are in the
assets directory where it feels best. Our code is clean and follows all the common Rails conventions. YAY!