scss Sass font-face mixin

Posted 2021-05-18

@mixin fontFace($family, $src, $style: normal, $weight: normal) {
	@font-face {
		font-family: $family;
		src: url('#{$src}.eot'); // IE9 compat
		src: url('#{$src}.eot?#iefix') format('embedded-opentype'), // IE8 and below
			url('#{$src}.woff') format('woff'), // standards
			url('#{$src}.ttf') format('truetype'), // Safari, Android, iOS
			url('#{$src}.svg##{$family}') format('svg'); // legacy iOS

		font-style: $style;
		font-weight: $weight;
	}
}

/*
$style-name being the name of the font e.g. Helvetica
$file meaning the file name, without the file extensions
$family being the folder inside the fonts folder where the font files are
$category is serif or sans-serif or monospace etc. as a fall back in CSS
*/

// real example
@include fontFace('bnb', '/fonts/bebas_neue_bold');