SCSS @font-face mixin

The Compass built in mixin is bit sucky, here's better.

@mixin font-face($style-name, $file, $family, $category:"") {
    $filepath: "fonts/" + $family + "/" + $file;
    @font-face {
        font-family: "#{$style-name}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
    }
    %#{$style-name} {
        font: {
            @if $category != "" {
                family: "#{$style-name}", #{$category};
            }
            @else {
                family: "#{$style-name}";
                weight: normal;
            }
        }
    }
}

Use it like this:

@include font-face($style-name, $file, $family, $category);
  • $style-name being the name of the font e.g. Helvetica
  • $file meaning the file name, without the file extensions
  • $family being the folder inside the fonts folder where the font files are
  • $category is serif or sans-serif or monospace etc. as a fall back in CSS

Here with real values:


@include font-face('Ashbury', 'AshburyLig-webfont', 'Ashbury', 'serif');

It’ll output:

@font-face {
  font-family: "Ashbury";
  src: url("fonts/Ashbury/AshburyLig-webfont.eot");
  src: url("fonts/Ashbury/AshburyLig-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Ashbury/AshburyLig-webfont.woff") format("woff"), url("fonts/Ashbury/AshburyLig-webfont.ttf") format("truetype"), url("fonts/Ashbury/AshburyLig-webfont.svg#Ashbury") format("svg");
}

More info and source.

Comments

  • dmaddison says:

    Thanks for this. I am not using Compass at the moment as I have just begun using Sass and am trying to get a better understanding of it by hand coding everything myself. I made a variation of your @mixin. Would love to hear your thoughts on it.

    @mixin font-face($family, $file, $category:”) {
    $filepath: ‘../fonts’ + $file;
    @font-face {
    src: url($filepath + ‘.ttf’);
    font-family: ‘#{$family}’;
    }
    %#{family} {
    font: {
    @if $category != ” {
    family: ‘#{family}’, #{category};
    }
    @else {
    family: ‘#{family}’;
    weight: normal;
    style: normal;
    }
    }
    }
    }

  • Anonymous says:

    On what file do you place the @include?

  • Amberly says:

    Remember when Old Styles were $1.50? That was grtei.Thangs I remember about JRs- Seeing Andrew on Conan O-Brien, getting a beer with Steph on our first date, playing Pac-Man with Klotz, getting bitched at by Lincoln for my choice of Zepplin songs, getting the shit scared out of me when the juke box was off and then it would randomly play Les Savy Fav’s “Wake up”, tastey pie, and a bunch of other crap that only my brain cares about.

  • awsome pics, but does anyone remember Holy Angels Catholice Church, and are there any photos of the church, as well as Horace Mann High. I went up to Gary in the late 80s. It was heart breaking when one had such great memories of the place.

  • Amazon Instant Video will no longer play with the latest beta channel update for Chrome OS. The error message indicates Flash Player needs to be updated. I reported the issue.

  • Is that really all there is to it because that’d be flabbergasting.

Club-Mate, the beverage → club-mate.fi