Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS mixing for generating @font-face constructs.
@mixin font($family, $file, $weight, $style, $locals) {
$prefix: "http://localhost:3000/fonts";
$src: null;
@each $local in $locals {
$src: append($src, local($local), comma);
}
$src: append($src, url("#{$prefix}/#{$file}.eot?#iefix") format("embedded-opentype"), comma);
$src: append($src, url("#{$prefix}/#{$file}.woff2") format("woff2"), comma);
$src: append($src, url("#{$prefix}/#{$file}.woff") format("woff"), comma);
$src: append($src, url("#{$prefix}/#{$file}.ttf") format("truetype"), comma);
$src: append($src, url("#{$prefix}/#{$file}.svg#Montserrat") format("svg"), comma);
@font-face {
font-family: "#{$family}";
font-style: $style;
font-weight: $weight;
src: url("#{$prefix}/optin/fonts/#{$file}.eot");
src: $src;
}
}
@include font(
"Montserrat",
"montserrat-v14-latin-ext_latin-regular",
400,
normal,
"Montserrat Regular" "Montserrat-Regular"
);
@include font(
"Montserrat",
"montserrat-v14-latin-ext_latin-800",
800,
normal,
"Montserrat ExtraBold" "Montserrat-ExtraBold"
);
@include font(
"Source Code Pro",
"source-code-pro-v10-latin-900",
900,
normal,
"Source Code Pro Black" "SourceCodePro-Black"
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.