Fonts and Rails Applications

There are several options for embedding fonts into a webpage. Here I’ll show, how I would optimize the process for page load speed and development convenience.

Self-hosted fonts vs. CDN vs. Local fonts

Speed

Obviosly, the fastest network request is one that wasn’t ever performed. Local fonts and suitable local fallback fonts can save couple milliseconds and improve visual appearance (as page’s elements won’t get resized when fonts are ready if fallback fonts matched well).

Speaking of CDN vs. self-hosted assets, always prefer CDN if it’s possible. The whole thing about CDN is they striving to be the closest and fastest delivery source for assets. And they probably are.

Bandwidth

As it is with speed, local fonts can save users some bandwidth, therefore preserving bandwidth for other resources.

But bandwidth is valuable resource on both sides. It’s good to save some bandwidth on the server side too. CDN comes handy again.

Server Performance

IO operations take time and memory on the server. Using asset servers or CDN can save your server several (million) iops, which can be utilized to serve actual content requests.

Development setup

It’s handy when you can skip downloading fonts from the internet, which allows you to develop offline and save some bandwidth. Most suitable approach is to use local fonts for this.

Fonts and rails

Now when it should be perfecly clear regarding general hosting options, it’s time to talk about aclually using fonts in rails applications.

Case a. Self-hosted fonts

This includes separate asset host, as rails asset url helpers utilize Rails.config.asset_host configuration options.

@font-face{
  font-family: Roboto;
  src: font-url(Roboto-Regular.ttf) format('truetype');
  font-style: normal;
  font-weight: 500;
}

font-url helper directive is used by an asset pipeline preprocessor to expand given filename to full url, possibly with other host. It’s possible to add other extensions using same font-url helper.

Case b. CDN-hosted fonts

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5UaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

Notice how there is no using of font-url(), but plain old url() instead, as CDN link must be static.

Case c. Local fonts

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans');
}

Case d. Mixed approach

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5UaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

Browser loads font in this exact order, so firstly it will try to find specified font face in local font cache, then if it fails, it will perform http request.

Notes

If you want to use local fonts for development, it’s necessary to install it. Then restart your browser. Not your rails server (rails will actually reload assets to point to local fonts, browser will use old font cache)!

SHOW COMMENTS (0)