A SCSS font mix-in that gives you both fast load times and ultimate compatibility.

fonts.scss

@import "compass/css3/font-face";


@mixin app-font($name, $weight: normal, $style: normal)
{
    $font-files:
        inline-font-files(
            '#{$name}.woff', woff
        ),
        font-files(
            '#{$name}.ttf', truetype,
            '#{$name}.svg#font', svg
        );
    @include font-face($name, $font-files, '#{$name}.eot', $weight, $style);
}

@include app-font('PTSerif-Regular');
@include app-font('PTSerif-Italic');
@include app-font('SourceSansPro-Regular');
@include app-font('SourceSansPro-Italic');
@include app-font('SourceSansPro-Semibold');

%normalize-font {
    font-style: normal;
    font-weight: normal;
}

%PTSerif-Regular {
    font-family: 'PTSerif-Regular', Arial, sans-serif;
    @extend %normalize-font;
}

%PTSerif-Italic {
    font-family: 'PTSerif-Italic', Arial, sans-serif;
    @extend %normalize-font;
}

%SourceSansPro-Regular {
    font-family: 'SourceSansPro-Regular', Arial, sans-serif;
    @extend %normalize-font;
}

%SourceSansPro-Italic {
    font-family: 'SourceSansPro-Italic', Arial, sans-serif;
    @extend %normalize-font;
}

%SourceSansPro-Semibold {
    font-family: 'SourceSansPro-Semibold', Arial, sans-serif;
    @extend %normalize-font;
}

%body-font-size {
    font-size: 14px;
}

%body-font {
    @extend %body-font-size;
    @extend %SourceSansPro-Regular;
}

%body-font-strong {
    @extend %body-font-size;
    @extend %SourceSansPro-Semibold;
}

%body-font-small {
    font-size: 12px;
    @extend %SourceSansPro-Regular;
}

%body-font-strong-small {
    font-size: 12px;
    @extend %SourceSansPro-Semibold;
}

%body-font-italic-small {
    font-size: 12px;
    @extend %SourceSansPro-Italic;
}

%largest-heading-font {
    font-size: 26px;
    @extend %PTSerif-Regular;
}

%larger-heading-font {
    font-size: 23px;
    @extend %PTSerif-Regular;
}

%heading-font {
    font-size: 20px;
    @extend %PTSerif-Regular;
}

%smaller-heading-font {
    font-size: 18px;
    @extend %SourceSansPro-Semibold;
}

%smallest-heading-font {
    font-size: 16px;
    @extend %SourceSansPro-Semibold;
}

%extra-large-italic-font {
    font-size: 35px;
    @extend %PTSerif-Italic;
}

body, input, textarea {
    color: $bodyTextColor;
    line-height: 1.231;
    -webkit-font-smoothing: antialiased;
    @extend %body-font;
}

h2, h3, h4, h5, h6 {
    color: $titleColor;
}

h2 {
    @extend %largest-heading-font;
}

h3 {
    @extend %larger-heading-font;
}

h4 {
    @extend %heading-font;
}

h5 {
    @extend %smaller-heading-font;
}

h6 {
    @extend %smallest-heading-font;
}

strong {
    @extend %body-font-strong;
}

small {
    @extend %body-font-small;
}

This SCSS/Compass font mix-in allows you to have ultimate compatibility with browsers and the best performance for more modern browsers that support WOFF fonts. It works by embedding the WOFF font directly into the generated CSS as a data URI. In this example, that saves 5 expensive HTTP requests. For browsers that don't support WOFF, they have a fallback, which actually makes the 5 separate HTTP requests in this case.

The steps to use this mix-in successfully are as follows:

1. Edit all your font files to have consistent file names with the font-family specified (e.g., font-family: "PTSerif-Regular" maps to font file PTSerif-Regular.woff).
2. Edit the SVG font files. Inside, you will see a <font> tag with an id. Change the id to equal "font" for every SVG font file.
3. Call the mixin like so:

@include app-font('PTSerif-Regular');

1. Create a silent class for the font:

%PTSerif-Regular { font-family: 'PTSerif-Regular', Arial, sans-serif; }

1. Extend the silent class in another semantic silent class:

h4 {
    @extend %PTSerif-Regular;
}

1. Only use the semantic silent classes in other SCSS files.

That's how you use it. I really wanted to use the Google Web Fonts approach and include font-style: italic; where appropriate, but there are issues with IE 8, of course. This way, at least, when we drop support for IE8 we can just change this mix-in to suit our new needs.

This code was the result of much research in the department of CSS fonts. The following resources may be of use to you:

• Google Web Fonts
• Font Squirrel
• Compass Font Face
• Can I Use... WOFF