Using Google Fonts in Ruby on Rails

Notes


I am a big fan of typography.

A couple of well chosen fonts can take a website for worst to first faster than a Tesla goes from 0 to 60.  Which is pretty fast if you've never been in one!

The best source for free fonts that I know of is Google Fonts.  For Nimble HQ, I've decided to go with Raleway for most text and to use Montserrat bold for our headers.  This is a clean combination and I like clean!

In order to use these fonts in our application we need to include the two following links in the HEAD element of our views.

<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800" rel="stylesheet">

Place these two lines in our reusable Rails partial in this file: app/views/shared/_header_elements.html.erb.

Now we need to update our CSS to tell the browser when to use these fonts and our app will start to have a bit of polish.

In the app/assets/stylesheets/application.css file include the following two style declarations:

body {
    font-family: 'Raleway', sans-serif !important;
}

h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
}

This will globally tell the browser to use the Raleway font for all text within our Rails application, but to use Montserrat bold (see what I did there!  Ha!) when rendering an h1 element. 

These kind of changes make it start to look like we care about our site.  The text now is a bit crisper and will stand our a bit compared to more vanilla sites with standard fonts.

Of course the actual content of a site or the features of an application are always the most important aspects.  But a bit of polish never hurts and finding a nice pairing of fonts is a nice touch.

Happy designing!!