1StopCoders

Code Examples and Industry News

SASS Font Face Mixin

SASS - Created by Casey Martin: 2014-05-16 17:02:00

@mixin font-face($style-name, $file, $family, $category:""){
	$filepath: "/root/_fonts/" + $file;
	@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#" + $style-name + "") format('svg');
	}

	%#{$style-name} {
		font: {
			@if $category != "" {
				family: "#{$style-name}", #{$category};
			}
			@else {
				family: "#{$style-name}";
				weight: normal;
			}
		}
	}
}
Example usage:
@include font-face(omnes, 'omnes-regular-webfont', 'omnes', 'serif');