Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
DIY @font-face web service.
Ruby
Tree: afcb413add

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
spec
.gitignore
Gemfile
Gemfile.lock
MIT-LICENSE
README.md
Rakefile
fistface.gemspec

README.md

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 FistFace

Prepare the production environment:

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

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

thoughtbot

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 © 2011 thoughtbot. It is free software, and may be redistributed under the terms specified in the MIT-LICENSE file.

Something went wrong with that request. Please try again.