# SCSS @font-face mixin

The built-in Compass mixin is bit janky, here’s better.

```scss
@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:

```scss
@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:

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

It'll output:

```css
@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](https://github.com/perry/sass-font-face).