Skip to content

Instantly share code, notes, and snippets.

@h2xd
Last active August 17, 2018 16:01
Show Gist options
  • Save h2xd/46b693d8c2fc980355a0884fc5013c97 to your computer and use it in GitHub Desktop.
Save h2xd/46b693d8c2fc980355a0884fc5013c97 to your computer and use it in GitHub Desktop.
SCSS mixin for font loading, logical directory scheme required
/**
* Load font-faces with no pain, that follow a named directory pattern
* GoogleFonts does so
* ---
* @params {String} $name - the name of the font
* @params {String} $path - font directory path
* @params {Map<String>} $types - the font-types you want to load ("Thin", "ThinItalic", "Light", "LightItalic", "Regular", "Italic", "Medium", "MediumItalic", "Bold", "BoldItalic", "ExtraBold", "ExtraBoldItalic", "Black", "BlackItalic")
* @returns {void}
* ---
* @licence MIT
* @author Andreas Schujkow <a.schujkow@gmail.com>
* @gist https://gist.github.com/SpaceRhino/46b693d8c2fc980355a0884fc5013c97
* ---
* @example ```
* Folder structure
* +++++++++++++++++++++++++++++++++++++++++++
* │──fonts
* │──FiraCode
* │ │──FiraCode-Bold.ttf
* │ │──FiraCode-Regular.ttf
* │ └──FiraCode-Italic.ttf
* └──Alegreya
* │──Alegreya-Regular.ttf
* │──Alegreya-Italic.ttf
* │──Alegreya-Bold.ttf
* │──Alegreya-BoldItalic.ttf
* │──Alegreya-Black.ttf
* └──Alegreya-BlackItalic.ttf
* +++++++++++++++++++++++++++++++++++++++++++
* And then just import them
* @import "./path/to/font-loader.scss";
* @include font-loader("FiraCode", "/path/to/fonts", ("Bold", "Regular", "Italic"));
* @include font-loader("Alegreya", "/path/to/fonts", $default-font-loader-types-with-black);
* ```
*/
@mixin font-loader ($name: false, $path: false, $types: $default-font-loader-types) {
@if ($name != false) {
@if ($path != false) {
@each $type in $types {
@at-root {
@font-face {
font-family: "#{$name}";
src: url($path + '/' + $name + '/' + $name + '-' + $type + '.ttf');
@if ($type == 'Thin') {
font-weight: 100;
} @else if ($type == 'ThinItalic') {
font-weight: 100;
font-style: italic;
} @else if ($type == 'Light') {
font-weight: 300;
} @else if ($type == 'LightItalic') {
font-weight: 300;
font-style: italic;
} @else if ($type == 'Italic') {
font-style: italic;
} @else if ($type == 'Medium') {
font-weight: 500;
} @else if ($type == 'MediumItalic') {
font-weight: 500;
font-style: italic;
} @else if ($type == 'Bold') {
font-weight: 700;
} @else if ($type == 'BoldItalic') {
font-weight: 700;
font-style: italic;
} @else if ($type == 'ExtraBold') {
font-weight: 800;
} @else if ($type == 'ExtraBoldItalic') {
font-weight: 800;
font-style: italic;
} @else if ($type == 'Black') {
font-weight: 900;
} @else if ($type == 'BlackItalic') {
font-weight: 900;
font-style: italic;
}
}
}
}
} @else {
@error "Please provide a $path as the second argument to the font-loader mixin";
}
} @else {
@error "Please provide a $name as the first argument to the font-loader mixin";
}
}
/* Common font types */
$default-font-loader-types-with-black: (
"Regular",
"Italic",
"Bold",
"BoldItalic",
"Black",
"BlackItalic"
);
$default-font-loader-types: (
"Regular",
"Italic",
"Bold",
"BoldItalic"
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment