Skip to content

Instantly share code, notes, and snippets.

@WinterSilence
Last active December 20, 2021 03:31
Show Gist options
  • Save WinterSilence/b5f3fcd6eecb46dca167816c05a57993 to your computer and use it in GitHub Desktop.
Save WinterSilence/b5f3fcd6eecb46dca167816c05a57993 to your computer and use it in GitHub Desktop.
SCSS/SASS mixin `@font-face`
$font-dir: null !default;
///
/// Returns font format.
///
/// @param {string} $src The font filename
/// @return {string}
///
@function font-format($src) {
$formats: (
"woff": "woff",
"woff2": "woff2",
"ttf": "truetype",
"otf": "opentype",
"svg": "svg"
);
@return map-get($formats, str-slice($src, str-index($src, '.') + 1));
}
///
/// @param {string} $family the font name
/// @param {string|list} $src the path font file(s)
/// @param {string|number} $weight the font weight: 400/`lighter`, 500/`normal` or 700/`bold`
/// @param {string} $style the font style: `normal`, `italic`
/// @param {string|null} $basedir the base directory of fonts, prepends to $src
/// @return {string}
///
@mixin font-face($family, $src, $weight: 400, $style: normal, $basedir: $font-dir) {
@font-face {
font-family: $family;
font-weight: $weight;
font-style: $style;
@if type-of($src) == string {
$format: font-format($src);
$src: if($basedir == null, quote($src), "#{$basedir}/#{$src}");
src: url($src) format($format);
} @else {
$result: ();
@each $url in $src {
$format: font-format($url);
$url: if($basedir == null, quote($url), "#{$basedir}/#{$url}");
$result: append($result, url($url) format($format), comma);
}
src: $result;
}
}
}
/**
* $font-dir: "../fonts";
* @include font-face(Foo, ["foo.ttf", "foo.woff2"]);
*/
@font-face {
font-family: Foo;
font-weight: 400;
font-style: normal;
src: url("../fonts/foo.ttf") format("ttf"), url("../fonts/foo.woff2") format("woff2");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment