Skip to content

Instantly share code, notes, and snippets.

@jenofdoom

jenofdoom/font-squirrel-mixin

Created January 7, 2015 03:12
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jenofdoom/14ecda14638234c9fb11 to your computer and use it in GitHub Desktop.
Save jenofdoom/14ecda14638234c9fb11 to your computer and use it in GitHub Desktop.
Download ZIP
SCSS mixin for font squirrel font import
Raw
font-squirrel-mixin
// font families!
@mixin font-face($fontname, $filename: $fontname, $weight: normal, $style: normal) {
// based on font squirrel output, without SVG (too legacy)
@font-face {
font-family: $fontname;
src:url('../fonts/#{$filename}.eot');
src:url('../fonts/#{$filename}.eot?#iefix') format('embedded-opentype'),
url('../fonts/#{$filename}.woff2') format('woff2'),
url('../fonts/#{$filename}.woff') format('woff'),
url('../fonts/#{$filename}.ttf') format('truetype');
font-weight: $weight;
font-style: $style;
}
}
// FONTS
@include font-face('Lato', 'lato-regular-webfont');
@include font-face('Lato', 'lato-italic-webfont', normal, italic);
@include font-face('Lato', 'lato-light-webfont', 300);
@include font-face('Lato', 'lato-lightitalic-webfont', 300, italic);
@include font-face('Lato', 'lato-hairline-webfont', 100);
@include font-face('Lato', 'lato-hairlineitalic-webfont', 100, italic);
@include font-face('Lato', 'lato-bold-webfont', 700);
@include font-face('Lato', 'lato-bolditalic-webfont', 700, italic);
@include font-face('Lato', 'lato-black-webfont', 900);
@include font-face('Lato', 'lato-blackitalic-webfont', 900, italic);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment