fistface: Sinatra + S3 + Heroku = DIY @font-face web service

For those looking to set their web sites free from the doldrums of boring web typography with the power of @font-face, many quickly discover that Firefox does not allow cross-domain font embedding. To get around the issue, you’ve got two choices. Host the fonts on the same domain as your site, or set the Access-Control-Allow-Origin HTTP header. Since Amazon S3 doesn’t allow you to set this header, your dreams of using it as a poor man’s CDN for your fonts are dashed.

Until now. Thoughtbot has released Fistface, a small Sinatra app that lets you roll your own font service with S3 as your backend.

Assuming you’ve got an S3 account, create a bucket and optionally map a CNAME to it. Next, upload your fonts in the following folder structure:


Then install the fistface gem:

gem install fistface

Next, create a Rack rackup file

require 'rubygems'
require 'bundler'
run FistFace

Fistface runs nicely on Heroku.

bundle install
git init
git add .
git commit -m "Creating a Fist Face instance"
heroku create
heroku config:add S3_URL=

Now you can embed your fonts with the following <link> tag

<link href="" rel="stylesheet" type="text/css">

… and CSS:

@font-face {
  font-family: 'Chunk';
  font-weight: normal;
  font-style: normal;
  src: local('☺'), url('') format('truetype');

It’s not Typekit, but it’s yours. Need web fonts? Be sure and check out Font Squirrel, FontSpring, or the ever-growing Google Font Directory.

[Source on GitHub]

News Films

Our little film studio focuses on telling developer-centric stories that need to be seen.

GopherCon 2016 Conference Recap

0:00 / 0:00