Skip to content

Instantly share code, notes, and snippets.

@lunelson
Created February 28, 2014 12:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lunelson/9270591 to your computer and use it in GitHub Desktop.
Save lunelson/9270591 to your computer and use it in GitHub Desktop.
Sketch for font-face mixin
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----
$font-path: 'assets/src/fonts/';
@mixin font-face($family, $file, $style: normal, $weight: normal, $path: $font-path) {
@font-face {
font-family: $family;
font-style: $style;
font-weight: $weight; // this should be both word and number values
src: url('#{$path}#{$file}.eot'); // IE9 Compat Modes
src: url('#{$path}#{$file}.eot?#iefix') format('embedded-opentype'), // IE6-IE8
url('#{$path}#{$file}.woff') format('woff'), // Modern Browsers
url('#{$path}#{$file}.svg##{$file}') format('svg'), // Legacy iOS
url('#{$path}#{$file}.ttf') format('truetype'); // Safari, Android, iOS
}
}
@include font-face('Prestige Elite','PrestEli', normal, 400);
@include font-face('Prestige Elite','PrestEliBol', normal, 700);
@include font-face('Prestige Elite','PrestEliSla', italic, 400);
@include font-face('Prestige Elite','PrestEliBolSla', italic, 700);
@font-face {
font-family: "Prestige Elite";
font-style: normal;
font-weight: 400;
src: url("assets/src/fonts/PrestEli.eot");
src: url("assets/src/fonts/PrestEli.eot?#iefix") format("embedded-opentype"), url("assets/src/fonts/PrestEli.woff") format("woff"), url("assets/src/fonts/PrestEli.svg#PrestEli") format("svg"), url("assets/src/fonts/PrestEli.ttf") format("truetype"); }
@font-face {
font-family: "Prestige Elite";
font-style: normal;
font-weight: 700;
src: url("assets/src/fonts/PrestEliBol.eot");
src: url("assets/src/fonts/PrestEliBol.eot?#iefix") format("embedded-opentype"), url("assets/src/fonts/PrestEliBol.woff") format("woff"), url("assets/src/fonts/PrestEliBol.svg#PrestEliBol") format("svg"), url("assets/src/fonts/PrestEliBol.ttf") format("truetype"); }
@font-face {
font-family: "Prestige Elite";
font-style: italic;
font-weight: 400;
src: url("assets/src/fonts/PrestEliSla.eot");
src: url("assets/src/fonts/PrestEliSla.eot?#iefix") format("embedded-opentype"), url("assets/src/fonts/PrestEliSla.woff") format("woff"), url("assets/src/fonts/PrestEliSla.svg#PrestEliSla") format("svg"), url("assets/src/fonts/PrestEliSla.ttf") format("truetype"); }
@font-face {
font-family: "Prestige Elite";
font-style: italic;
font-weight: 700;
src: url("assets/src/fonts/PrestEliBolSla.eot");
src: url("assets/src/fonts/PrestEliBolSla.eot?#iefix") format("embedded-opentype"), url("assets/src/fonts/PrestEliBolSla.woff") format("woff"), url("assets/src/fonts/PrestEliBolSla.svg#PrestEliBolSla") format("svg"), url("assets/src/fonts/PrestEliBolSla.ttf") format("truetype"); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment