$roboto_light: "Roboto-Light"; $file: "Roboto-Light-webfont"; $family: "roboto_light/"; $category: "sans-serif"; @mixin font-face($roboto_light, $file, $family, $category:"") { $filepath: "../fonts/" + $family + "/" + $file; @font-face { font-family: "#{$roboto_light}"; 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#" + $roboto_light + "") format('svg'); } %#{$roboto_light} { font: { @if $category != "" { family: "#{$roboto_light}", #{$category}; } @else { family: "#{$roboto_light}"; weight: normal; } } } } $roboto_regular: "Roboto-regular"; $file2: "Roboto-Regular-webfont"; $family2: "roboto_regular/"; @mixin font-face($roboto_regular, $file2, $family2, $category:"") { $filepath: "../fonts/" + $family2 + "/" + $file2; @font-face { font-family: "#{$roboto_regular}"; 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#" + $roboto_regular + "") format('svg'); } %#{$roboto_regular} { font: { @if $category != "" { family: "#{$roboto_regular}", #{$category}; } @else { family: "#{$roboto_regular}"; weight: normal; } } } } $roboto_medium: "Roboto-Medium"; $file3: "Roboto-Medium-webfont"; $family3: "roboto_medium/"; @mixin font-face($roboto_medium, $file3, $family3, $category:"") { $filepath: "../fonts/" + $family3 + "/" + $file3; @font-face { font-family: "#{$roboto_medium}"; 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#" + $roboto_medium + "") format('svg'); } %#{$roboto_medium} { font: { @if $category != "" { family: "#{$roboto_medium}", #{$category}; } @else { family: "#{$roboto_medium}"; weight: normal; } } } } $roboto_bold: "Roboto-Bold"; $file4: "Roboto-Bold-webfont"; $family4: "roboto_bold/"; @mixin font-face($roboto_bold, $file4, $family4, $category:"") { $filepath: "../fonts/" + $family4 + "/" + $file4; @font-face { font-family: "#{$roboto_bold}"; 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#" + $roboto_bold + "") format('svg'); } %#{$roboto_bold} { font: { @if $category != "" { family: "#{$roboto_bold}", #{$category}; } @else { family: "#{$roboto_bold}"; weight: normal; } } } }