Setting up Rails 5 self hosted fonts
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:
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.
This side project needs to be self hosted so I want to vendor the library rather than rely on CDN’s
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
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.
Create the folder
app/assets/fontsand place your fonts in there.
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.
font-awesome.css.erb. This will allow the file to be processed for
cssfile, changing all paths to the fonts to
erbsnippets using rails helpers to inject the correct path there: (or just copy and paste this below:
- Restart your
railsserver and hey, you should have font. And if you don’t well…. Happy hunting.