Rack::Fontserve

A simple Sinatra-based font hosting rack application that utilizes HTTP caching and Allow-Access-Control-Origin properly and generates the corresponding @font-face-CSS file on the fly.

Running standalone

Create a Gemfile:

source :rubygems
gem 'rack-fontserve'

Create a config.ru:

require 'bundler/setup'
require 'rack-fontserve'
Rack::Fontserve.set :fonts_path, './fonts'
run Rack::Fontserve

Create a directory ‘fonts’, place your fonts inside there in subfolders, where each font format file has the same name as the directory:

fonts/iconic_stroke/
  + iconic_stroke.eot
  + iconic_stroke.ttf
  + iconic_stroke.svg

That’s it! Run with rackup, push to heroku, or mount it in an existing Rails 3 app by adding rack-fontserve to your gemfile, setting the fonts path and mounting the app in your routes.rb file:

mount Rack::Fontserve, :at => "/fonts"

You can see a demo of all fonts in the fonts_path at the root page (/). To deactivate demo mode, use Rack::Fontserve.set :demo, false.

The font name is the name of the font’s directory, so in the above example, the font would be called ‘iconic_stroke’.

Custom font CSS

When a font_name.css file is found in the subdirectory, this file will be rendered instead of the auto-generated css. If you want to tweak your css settings, copy and paste the auto-generated css into such a file and customize it to your liking!

Incorporate font licenses into CSS

If you place a text file named LICENSE inside some font’s subdirectory, this file’s content will automatically be added as a CSS comment at the top of your auto-generated CSS. This won’t happen when using custom css, so make sure your custom css has the license added as you want it.

TODO

Improve the CSS syntax (kill unneccessary blank lines)
Make the scope selector for svg fonts configurable
Make the fall-back fonts configurable
Add an “all.css” action that aggregates all fonts into one file

Note on Patches/Pull Requests