Typography Prototype

typography.scss

@mixin font-face($name, $filename, $weight: regular) {
	@font-face {
		font-family: $name;
		font-wight: $weight;
		src: url(unquote($filename) + '.eot'); /* IE9 Compat Modes */
		src: url(unquote($filename) + '.woff2') format('woff2'), /* Super Modern Browsers */
			url(unquote($filename) + '.woff') format('woff'), /* Pretty Modern Browsers */
			url(unquote($filename) + '.ttf')  format('truetype'), /* Safari, Android, iOS */
			url(unquote($filename) + '.svg#svgFontName') format('svg'); /* Legacy iOS */
	}
}

@include font-face('Montserrat', 'Montserrat');
@include font-face('Montserrat', 'Montserrat-Bold', 800);

$font-family--default:  'MyWebFont';

%font-family--default 	{ font-family: $font-family--default; }
%font-weight--bolder  	{ font-weight: 800; }
%font-weight--bold  	  { font-weight: 600; }

.findmenow {
	@extend %font-family--default;
	@extend %font-weight--bolder;
}