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:

font-name.css
font-name/
  font-name.eot
  font-name.otf
  font-name.svg
  font-name.tff
  font-name.woff

Then install the fistface gem:

gem install fistface

Next, create a Rack config.ru rackup file

require 'rubygems'
require 'bundler'
Bundler.require
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=https://your-bucket.s3.amazonaws.com

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

<link href="http://replace-me.com/font-name.css" rel="stylesheet" type="text/css">

… and CSS:

@font-face {
  font-family: 'Chunk';
  font-weight: normal;
  font-style: normal;
  src: local('☺'), url('http://replace-me.com/chunk/chunk.ttf') 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]