SASS and @font-face

Solution 1:

In case anyone was wondering - it was probably my css...

@font-face
  font-family: "bingo"
  src: url('bingo.eot')
  src: local('bingo')
  src: url('bingo.svg#bingo') format('svg')
  src: url('bingo.otf') format('opentype')

will render as

@font-face {
  font-family: "bingo";
  src: url('bingo.eot');
  src: local('bingo');
  src: url('bingo.svg#bingo') format('svg');
  src: url('bingo.otf') format('opentype'); }

which seems to be close enough... just need to check the SVG rendering

Solution 2:

I’ve been struggling with this for a while now. Dycey’s solution is correct in that specifying the src multiple times outputs the same thing in your css file. However, this seems to break in OSX Firefox 23 (probably other versions too, but I don’t have time to test).

The cross-browser @font-face solution from Font Squirrel looks like this:

@font-face {
    font-family: 'fontname';
    src: url('fontname.eot');
    src: url('fontname.eot?#iefix') format('embedded-opentype'),
         url('fontname.woff') format('woff'),
         url('fontname.ttf') format('truetype'),
         url('fontname.svg#fontname') format('svg');
    font-weight: normal;
    font-style: normal;
}

To produce the src property with the comma-separated values, you need to write all of the values on one line, since line-breaks are not supported in Sass. To produce the above declaration, you would write the following Sass:

@font-face
  font-family: 'fontname'
  src: url('fontname.eot')
  src: url('fontname.eot?#iefix') format('embedded-opentype'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg')
  font-weight: normal
  font-style: normal

I think it seems silly to write out the path a bunch of times, and I don’t like overly long lines in my code, so I worked around it by writing this mixin:

=font-face($family, $path, $svg, $weight: normal, $style: normal)
  @font-face
    font-family: $family
    src: url('#{$path}.eot')
    src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg')
    font-weight: $weight
    font-style: $style

Usage: For example, I can use the previous mixin to setup up the Frutiger Light font like this:

+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')

Solution 3:

For those looking for an SCSS mixin instead, including woff2, SASS list.append is useful for conditionally adding source files/formats:

@mixin fface(
  $path,
  $family,
  $type: "",
  $weight: 400,
  $style: normal,
  $local1: null,
  $local2: null,
  $ttf: null,
  $otf: null,
  $eot: null,
  $svg: null
) {
  $src: null; // initialize an empty source path
  // only load local files when both sources are present
  @if $local1 and $local2 {
    $src: append($src, local("#{$local1}"), comma);
    $src: append($src, local("#{$local2}"), comma);
  }

  @if $otf {
    $src: append($src, url("#{$path}#{$type}.otf") format("opentype"), comma);
  }

  // load default formats (woff and woff2)
  $src: append($src, url("#{$path}#{$type}.woff2") format("woff2"), comma);
  $src: append($src, url("#{$path}#{$type}.woff") format("woff"), comma);
  // formats that should only be added at the end
  @if $ttf {
    $src: append($src, url("#{$path}#{$type}.ttf") format("truetype"), comma);
  }

  @if $svg {
    $src: append($src, url("#{$path}#{$type}.svg##{$svg}") format("svg"), comma);
  }
  // the actual FONT FACE DECLARATION
  @font-face {
    font-family: $family;
    // for compatibility reasons EOT comes first and is not appended
    @if $eot {
      src: url("#{$path}#{$type}.eot");
    }
    // load appended sources path
    src: $src;
    font-weight: $weight;
    font-style: $style;
  }
}
// USAGE
$dir: "assets/fonts/";

// declare family name
$familyName: "MyFont";

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-regular", 400, "normal",
  "#{$familyName} Regular", "#{$familyName}-Regular", "ttf", "otf"
);

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-medium", 500, "normal",
  "#{$familyName} Medium", "#{$familyName}-Medium", "ttf", "otf"
);

@include fface(
  "#{$dir}#{$familyName}", $familyName, "-semibold", 600, "normal",
  "#{$familyName} SemiBold", "#{$familyName}-SemiBold", "ttf", "otf"
);

// Material Icons
$familyName: "Material Icons"; // override previous value
$familyFileName: "MaterialIcons";

@include fface(
  "#{$dir}#{$familyFileName}", $familyName, "-regular", 400, "normal",
  $familyName, "#{$familyFileName}-Regular", "ttf", null, "eot"
);
@include fface(
  "#{$dir}#{$familyFileName}", "#{$familyName} Outline", "-outline", 400, "normal",
  "#{$familyName} Outline", "#{$familyFileName}-Outline", null, "otf", "eot"
);

.material-icons {
  font-family: $familyName;
}

.material-icons-outline {
  font-family: "#{$familyName} Outline";
}

The $type parameter is used for locating different files within a $family.

If you get a can't resolve error, remember to double check your fonts directory ($dir).