How to use Compass’ @font-face

The Compass @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…

/* The long hand way. Yuck! */
@font-face {
  font-family: "PacificoRegular";
  src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot');
  src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot?#iefix') format('eot'),
       url('[project-root]/fonts/pacifico/Pacifico-webfont.woff') format('woff'),
       url('[project-root]/fonts/pacifico/Pacifico-webfont.ttf') format('truetype'),
       url('[project-root]/fonts/pacifico/Pacifico-webfont.svg') format('svg');
}
CSS @font-face declaration

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…

@include font-face()
@include font-face("PacificoRegular", font-files("pacifico/Pacifico-webfont.woff", "pacifico/Pacifico-webfont.ttf", "pacifico/Pacifico-webfont.svg"), "pacifico/Pacifico-webfont.eot");
Compass’ @font-face helper

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 config.rb file.

#Projects Font Directory

# Example 1
# Uses your project root
# as the location.
fonts_dir = "fonts"

# You could also do this…

# Example 2
# This just says my "fonts" directory
# is within my "typography" directory.
fonts_dir = "typography/fonts"
Compass’ config.rb file and setting for the fonts directory that works alongside our @font-face helper.

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.

References

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.
  1. ❧ joni.giuro shouted:
    2013/11/08 • 3:27 pm

    DUUUUDE YOU JUST SAVED MY ASS! I was leaving the .eot inside the font-files parenthesis and IE8 didn’t want to load them. Been struggling with it for the last couple of hours. Thanks, you earned all my internets!

    1. Absolutely. Stoked that it was of help.

  2. ❧ Tobias Williams shouted:
    2014/07/17 • 9:14 pm

    Thanks for explaining the compass example, reading their page and then reading yours really helped me. Bookmarked for later.

    1. NP Tobias. Glad it helped 🙂

  3. ❧ Amin shouted:
    2014/08/11 • 2:57 am

    I’m using a variable for my approach:

    $font-Droid: DroidPersianNaskh-Regular;
    @include font-face("Droid",
              font-files(
                "#{$font-Droid}.ttf",
                "#{$font-Droid}.woff",
                "#{$font-Droid}.svg"
              ),
              "#{$font-Droid}.eot"
              );
  4. ❧ Sasha Dobrota shouted:
    2014/10/02 • 1:49 pm

    Thanks for the help dude. Good stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2013/07/27