Skip to content

Instantly share code, notes, and snippets.

@mohsin
Created April 13, 2015 22:22
Show Gist options
  • Save mohsin/8c067b220358d0620f6e to your computer and use it in GitHub Desktop.
Save mohsin/8c067b220358d0620f6e to your computer and use it in GitHub Desktop.
Font Face mixin usage
//
// Font Face mixin usage (https://github.com/perry/sass-font-face)
// @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
//
=font-face($style-name, $file, $family, $category: "", $weight: "", $style: "")
$filepath: $file + "/" + $family
@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#" + implode(explode($family,'-')) + "") format("svg")
@if $weight != ""
font-weight: #{$weight}
@if $style != ""
font-style: #{$style}
%#{$style-name}
font:
@if $category != ""
family: #{$style-name}, #{$category}
@else
family: #{$style-name}
weight: normal
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment