Last active
August 17, 2018 16:01
-
-
Save h2xd/46b693d8c2fc980355a0884fc5013c97 to your computer and use it in GitHub Desktop.
SCSS mixin for font loading, logical directory scheme required
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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