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
gem install fistface
Next, create a Rack
config.ru rackup file
Fistface runs nicely on Heroku.
git add .
git commit -m "Creating a Fist Face instance"
heroku config:add S3_URL=https://your-bucket.s3.amazonaws.com
Now you can embed your fonts with the following
<link href="http://replace-me.com/font-name.css" rel="stylesheet" type="text/css">
… and CSS:
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]