Skip to content

Instantly share code, notes, and snippets.

@raulb
Created March 13, 2012 19:01
Show Gist options
  • Save raulb/2030793 to your computer and use it in GitHub Desktop.
Save raulb/2030793 to your computer and use it in GitHub Desktop.
Generating font-face with SASS
$font-folder: "/fonts/"
// `font-face($name, $font-files, $eot, $weight, $style)
// ---------------------------------------------------------------
// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
// $name is required, arbitrary, and what you will use in font stacks.
// $font-files is required using font-files('relative/location', 'format'). for best results use this order: woff, opentype/truetype, svg
// $eot is required by IE, and is a relative location of the eot file.
// $weight shows if the font is bold, defaults to normal
// $style defaults to normal, might be also italic. Order of the includes matters, and it is: normal, bold, italic, bold+italic
// From: http://compass-style.org/reference/compass/css3/font_face/
=font-face($name, $font-files, $eot: false, $weight: false, $style: false)
$iefont: unquote("#{$eot}?#iefix")
@font-face
font-family: quote($name)
@if $eot
src: font-url($eot)
$font-files: font-url($iefont) unquote("format('eot')"), $font-files
src: $font-files
@if $weight
font-weight: $weight
@if $style
font-style: $style
@mixin generate-font-face($font-name,$font-file-root,$svg-extension,$font-weight:normal,$font-style:normal)
+font-face($font-name,font-files('#{$font-folder}#{$font-file-root}.woff', woff, '#{$font-folder}#{$font-file-root}.ttf',truetype,'#{$font-folder}#{$font-file-root}.svg#{$svg-extension}',svg),'#{$font-folder}#{$font-file-root}.eot',$font-weight,$font-style)
@include generate-font-face ('CorbelRegular','corbel-webfont','#webfontO0rfJpd7')
@include generate-font-face ('CorbelBold','corbelbold-webfont','#webfontlZZPxZYu')
...
@raulb
Copy link
Author

raulb commented Mar 13, 2012

Generate

@font-face {
  font-family: "CorbelRegular";
  src: url(/fonts/corbel-webfont.eot);
  src: url(/fonts/corbel-webfont.eot?#iefix) format('eot'), url(/fonts/corbel-webfont.woff) format('woff'), url(/fonts/corbel-webfont.ttf) format('ttf'), url(/fonts/corbel-webfont.svg#webfontO0rfJpd7) format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "CorbelBold";
  src: url(/fonts/corbelbold-webfont.eot);
  src: url(/fonts/corbelbold-webfont.eot?#iefix) format('eot'), url(/fonts/corbelbold-webfont.woff) format('woff'), url(/fonts/corbelbold-webfont.ttf) format('ttf'), url(/fonts/corbelbold-webfont.svg#webfontlZZPxZYu) format('svg');
  font-weight: normal;
  font-style: normal;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment