Un jour, une gem

03/05/2012

Jeudi c'est Fist Face

gem install fistface

DIY @font-face web service

Vous avez un super site qui utilise des @font-face. Mais vous voulez que la police ne soit pas chargée à chaque rafraîchissement et aussi que la bonne police soit renvoyée en fonction du navigateur. Alors voilà une solution possible :)

Tout commence comme ceci : créez un dossier, placez-vous dedans et créez un Gemfile :

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

Ensuite créer un fichier config.ru :

require 'rubygems'
require 'bundler'
Bundler.require
run FistFace

Puis quelques commandes à balancer :

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

L’url S3 correspond à l’endroit où seront stockées vos fonts.

Pour le rangement des polices dans votre bucket, cela doit se passer comme ceci :

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

Le fichier CSS font-name.css (un par police) sera dans ce goût-là :

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

Voilà, il ne reste plus qu’à appeler ces feuilles de style dans votre site :)

Le lien utile