@font-face helper is designed to let authors install custom fonts directly into a style sheet without writing out the entire
@font-face declaration that looks something like the following…
If you’re like me then you’ll be looking for a way to automate this especially if you have some super custom font(s) that you need to use with your project. This is where Compass’
@font-face helper will make all your troubles go away. Instead of writing out that nasty business above we can make this a little more pleasant for ourselves like so…
In one line we’ve taken care of exactly what the Vanilla CSS example did, but in a shorter, sweeter fashion. Instead of specifying the fonts directory we let our Compass config do the work for us. In the example above I’ve included my font-family in its own folder (pacifico) just to keep things nice and tidy. This way I don’t have my “fonts” directory containing every single font file and ultimately cluttering up the joint (especially if there is more than one font-family). In order to setup this helper you’ll need the following line either added or uncommented in your Compass
According to the Compass docs the syntax looks like this…
font-face($name, $font-files, [$eot], [$weight], [$style])
The part that says
[$eot] is very important if you want IE support especially providing a fallback for IE6-8 which spits out the following lines:
src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot'); src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot?#iefix') format('eot')
IE8 and older have a bug in their parsers for the
src attribute. So if you include more than 1 font format in the
src, IE8 and below fails to load the
.eot and reports a 404 error. The question mark solves that problem as it fools IE into thinking the rest of the string (other src) is a query string, and therefore loading just the EOT file. Other browsers will follow the specification and load just their required font type. Compass suggests for the best results authors use this order: woff, opentype/truetype, svg and eot.
And just like that you’re on your way to using Compass’
@font-face helper. I hope you enjoy this helper as much as I do and make sure to tell Chris Eppstein how much this little piece of Compass magic rocks.