Introduction

A number of different companies are coming up with solutions for display custom fonts to end users. Google offers a free service with a number of fonts available, while Adobe's Typekit is a popular paid solution, but how do you integrate these solutions into your Rails app? More-so, is there an easy, universal way to do it? Fortunately it's really easy. Let's get started.

Rails Application Setup

While there are a number of different ways to utilize custom web fonts, we will make things really easy by using a gem called google-webfonts-rails. The google-webfonts-rails gem provides a thin wrapper around the Google Web Font loader, which gives us easy access to various web font services. Open up your gemfile and add this gem as listed below.

Gemfile:

gem 'google-webfonts-rails', '~> 0.0.4'

Now let's run a bundle install to install it.

Terminal Commands:

bundle install

Now let's create a landing page to test things with. Create a controller called homes with an action called show by running the commands listed below.

Terminal Commands:

rails g controller homes show

Now let's modify our routes file to set a site root. Open up your routes file and modify it so that i t looks like the code listed below.

Terminal Commands:

Rails.application.routes.draw do
  resource :home, only: [:show]
  root to: "homes#show"
end

Great, now let's add some code to our layout to use a couple custom fonts provided by Google. For this example we will use the 'Roboto' and 'Roboto Slab' fonts by Google. Open up your application layout and modify it so that it looks like the code listed below.

app/views/application.html.erb:

<!DOCTYPE html>
<html>
<head>
  <title>WebFontsExample</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  
<%= google_webfonts_init({
    google: ['Roboto Slab', 'Roboto']
  }) %>

</head>
<body>

<%= yield %>

</body>
</html>

The google_webfonts_init ruby function above reaches out to Google and grabs the code necessary to render your text in the desired fonts.

Now we need to perform one more step. We need to actually add some CSS that will allow us to use our new fonts. Open up your application.css file and modify it so that it looks like the code listed below.

app/assets/stylesheets/application.css:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 h1 {
  font-family: "Roboto Slab";
 }

body {
	font-family: 'Roboto'
}

Now if you start a rails server and navigate to http://localhost:3000/ you will notice that the new fonts you specified are being used on the page.

What if we want to use another service such as typekit or fonts.com? Well it's pretty easy. Simply modify your google_webfonts_init function as needed. For example:

For Adobe Typekit:

<%= google_webfonts_init({
    typekit: 'mytypekitid'
  }) %>
For Fonts.com:

<%= google_webfonts_init({
    monotype: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
  }) %>

You can even use multiple services at the same time:


<%= google_webfonts_init({
    google: ['Roboto Slab', 'Roboto']
    monotype: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
  }) %>

Full documentation on the subject matter listed here can be found at the links listed below. Thanks for reading!

Resources