Using Font Squirrel with the Istarel Workshop Framework

There are many font services out there, but with the advent of embedded fonts on the web, I have slowly moved away from services like TypeKit and instead turned to FontSquirrel. The font selection is excellent, and my primary graphic design and branding partner Rhyme and Reason use it as well. Frequently, they provide me with Photoshop files to use as a design guide for web applications that I am building.

When I encounter a font in the design files, I first look it up at FontSquirrel, and download the font to install on my Mac. Once I have that file locally (either a TTF or OTF), I can take advantage of FontSquirrel's excellent webfont-generator tool. I typically work by doing this one font-face at a time (to ensure I am only embedding the faces I actually need for a particular project).

Once I have added fonts, I click the "Download Your Kit" button and wait for the magic to happen. Once finished, a directory of files is created for my use, including all the various versions of the font I'll need along with an example page and the key stylesheet file.

When using these fonts in an Istarel Workshop Framework project, I move the font files into the /lib/font directory.

cd ~/Sites/iw3
ls -al lib/font/
-rwxr-xr-x@ 1 markf  staff   26469 Jun 29 11:44 raleway-regular-webfont.eot
-rwxr-xr-x@ 1 markf  staff  123470 Jun 29 11:44 raleway-regular-webfont.svg
-rwxr-xr-x@ 1 markf  staff   51860 Jun 29 11:44 raleway-regular-webfont.ttf
-rwxr-xr-x@ 1 markf  staff   29548 Jun 29 11:44 raleway-regular-webfont.woff

To use the font files, there are two key steps. One obvious, and one not so obvious. First, the obvious: the stylesheet file needed by any application module to use the fonts needs to be updated.

Partial Listing: /lib/css/public.css

@font-face {
    font-family: 'ralewayregular';
    src: url('/lib/font/raleway-regular-webfont.eot');
    src: url('/lib/font/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/lib/font/raleway-regular-webfont.woff') format('woff'),
         url('/lib/font/raleway-regular-webfont.ttf') format('truetype'),
         url('/lib/font/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Next, the more subtle requirement. When an application is first created using the Istarel Workshop Application Framework, a default .htaccess file is created that acts as the first gateway for the Front Controller: essentially, route PHP requests to the application handler but allow image requests to be managed by Apache. The way the .htaccess file is written, however, is that it sends anything not specifically of certain types to the Front Controller. So, we have to make sure that these font files are properly handled by Apache.

RewriteEngine On
RewriteRule !\.(js|ico|gif|jpg|png|css|eot|svg|ttf|woff)$ index.php

Happy fonting!