Shermans's Notes
Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Back to homepage

Setting up Rails 5 self hosted fonts

2 minutes to read fixed reminder ruby

TL-DR; Get to the point

I just started another small side project based on a fresh rails 5 setup.

I thought this was a good opportunity to try out a different CSS framework called Bulma, which I saw mentioned on Garry’s Blog. Why not? Small projects are great for trying new things.

bulma uses font-awesome but does not package it in their framework, which is fair. They suggest that you use a CDN copy of font-awesome. Now, in production I may do such a thing, but:

  1. I want to be able to develop offline. There is nothing worse than refreshing a page and it looks like crap because you are in a tunnel on the train.

  2. This side project needs to be self hosted so I want to vendor the library rather than rely on CDN’s

  3. A weak reason, but I remember reading an article I can’t find about just how much meta-data is sniffed and compiled about users of CDN’s. You can’t escape it normally, but why add to it. Looks for tin hat

OK! Download Bulma and Font-Awesome extract them into the relevant app/assets in my rails app, and start writing the layout template.

It was at this point that I hit the issue that I couldn’t see any fonts from font-awesome. The inspector told me that the resources were getting 404 and rails told me no such routes existed.

Alright then I must be doing something wrong. Actually as rails has a complex assets system using sprockets there are a couple more steps that involve editing the .css files of font awesome.

  1. Create the folder app/assets/fonts and place your fonts in there.

  2. Edit config/application.rb and add config.assets.paths << Rails.root.join("app", "assets", "fonts"). This will add the new fonts folder to the assets system, which will allow them to be served.

  3. Rename font-awesome.css to font-awesome.css.erb. This will allow the file to be processed for erb snippets.

  4. Edit the css file, changing all paths to the fonts to erb snippets using rails helpers to inject the correct path there: (or just copy and paste this below:

1
2
3

src: url('<%= asset_path("fontawesome-webfont.eot") %>');
src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('embedded-opentype'), url('<%= asset_path("fontawesome-webfont.woff2") %>') format  ('woff2'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'),
  url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%=   asset_path("fontawesome-webfont.svg") + "#fontawesomeregular" %>') format('svg');
  1. Restart your rails server and hey, you should have font. And if you don’t well…. Happy hunting.