@font-face en @mixin SCSS

Voici une mixin SCSS, mise au point Jonathan Neal, et disponible sur Github, qui permet d’ajouter rapidement une instruction @font-face. Elle prend comme paramètres le nom d’usage de la police, le chemin vers ses fichiers, la graisse, le style, et les extensions des fichiers à inclure (facultatifs).

@mixin fontface($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
	$src: null;
	$extmods: (
		eot: "?",
		svg: "#" + str-replace($name, " ", "_")
	);
	$formats: (
		otf: "opentype",
		ttf: "truetype"
	);
	@each $ext in $exts {
		$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
		$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
		$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
	}
	@font-face {
		font-family: quote($name);
		font-style: $style;
		font-weight: $weight;
		src: $src;
	}
}

Usage :

@include fontface('mafonttest', '../fonts/mafonttest-light', 300, normal);
@include fontface('mafonttest', '../fonts/mafonttest-lightitalic', 300, italic);

@include fontface('mafonttest', '../fonts/mafonttest-book', 400, normal);
@include fontface('mafonttest', '../fonts/mafonttest-bookitalic', 400, italic);

@include fontface('mafonttest', '../fonts/mafonttest-bold', 700, normal);
@include fontface('mafonttest', '../fonts/mafonttest-bolditalic', 700, italic);

body{
	font-family:"mafonttest";
}