Fist Face

DIY @font-face web service.

Usage

In your web app:

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

Replace the href with the URL of your @font-face web service.

Features

• Fixes the Access-Control-Allow-Origin problem in Firefox and other browsers
• HTTP caches fonts so they are downloaded only once by the same browser
• Content-Type always correct for .ttf, .otf, .woff, .eot, and .svg fonts

Setup

Create a Gemfile:

source 'http://rubygems.org'
gem 'sinatra',  '~> 1.1'
gem 'fistface', '~> 1.0'

Create a rackup file (config.ru):

require 'rubygems'
require 'bundler'
Bundler.require
run Sinatra::FistFace
run Sinatra::Application

Prepare the app for production:

bundle install
git init
git add .
git commit -m 'Creating a Fist Face instance'

Create the production environment. Use Heroku's Bamboo stack in order to use Varnish:

heroku create your-app-name-here --stack bamboo-mri-1.9.2

Add your S3 bucket:

heroku config:add S3_URL=https://your-bucket.s3.amazonaws.com

Do not include a trailing slash.

S3_URL is the URL of the asset host which stores your @font-face definitions in CSS files.

For each font you want to serve, upload a CSS file to your asset host like:

@font-face {
  font-family: 'Chunk';
  font-weight: normal;
  font-style: normal;
  src: local('☺'), url('http://replace-me.com/chunk/chunk.ttf') format('truetype');
}

Fist Face uses a directory-and-file convention like this:

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

It is up to you to determine how many formats you need to include in your CSS file.

Upload each font file using that convention.

Deploy your @font-face web service:

git push heroku master

Start serving fonts!

Patches

Please use Github Issues and Pull Requests for any patches.

To run the Sinatra app locally:

gem install bundler
bundle install
S3_URL=https://your-bucket.s3.amazonaws.com rackup

To run the specs:

rspec spec/app_spec.rb

Credits

Fist Face is maintained and funded by thoughtbot, inc

Thank you to all the contributors!

The names and logos for thoughtbot are trademarks of thoughtbot, inc.

License

Fist Face is Copyright © 2010-2013 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the MIT-LICENSE file.