Last active
November 4, 2019 00:04
-
-
Save renatodeleao/bc9327daf1d1dcd057da1026c03ba406 to your computer and use it in GitHub Desktop.
@font-face with humanized font names
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
// ---- | |
// libsass (v3.5.4) | |
// ---- | |
/// | |
/// String functions by Pascal Duez | |
/// @link https://gist.github.com/pascalduez/10011785 | |
/// | |
@function contain($list, $value) { | |
@return not not index($list, $value); | |
} | |
@function capitalize($string) { | |
@return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2); | |
} | |
// Capitalize each word in string | |
// -------------------------------------------------------------------------------- | |
// @param [string] $string | |
// -------------------------------------------------------------------------------- | |
// @return [string] | |
@function str-capitalize-words($string) { | |
$progress: $string; | |
$result: ""; | |
$running: true; | |
@while $running { | |
$index: str-index($progress, " "); | |
@if $index { | |
$result: $result + capitalize(str-slice($progress, 1, $index)); | |
$progress: str-slice($progress, ($index + 1)); | |
} | |
@else { | |
$running: false; | |
} | |
} | |
@return capitalize($result) + capitalize($progress); | |
} | |
@function camelize($string) { | |
$progress: $string; | |
$result: ""; | |
$exclude: " ", "-", "–", "—", "_", ",", ";", ":", "."; | |
@while str-length($progress) > 0 { | |
$char: str-slice($progress, 1, 1); | |
@if contain($exclude, $char) { | |
$progress: capitalize(str-slice($progress, 2, 2)) + str-slice($progress, 3); | |
} | |
@else { | |
$result: $result + $char; | |
$progress: str-slice($progress, 2); | |
} | |
} | |
@return $result; | |
} | |
@function to-pascal-case($string) { | |
@return capitalize(camelize($string)); | |
} | |
@function humanized-font-weight($weight: 400){ | |
@if $weight == 100 { | |
@return ("Thin", "Hairline"); | |
} @else if $weight == 200 { | |
@return ("Extra Light", "Ultra Light"); | |
} @else if $weight == 300 { | |
@return ("Light"); | |
} @else if $weight == 400 { | |
@return ("Book", "Regular", "Normal"); | |
} @else if $weight == 500 { | |
@return ("Medium"); | |
} @else if $weight == 600 { | |
@return ("Semi Bold", "Demi Bold"); | |
} @else if $weight == 700 { | |
@return ("Bold"); | |
} @else if $weight == 800 { | |
@return ("Extra Bold", "Ultra Bold"); | |
} @else if $weight == 900 { | |
@return ("Black", "Heavy"); | |
} @else { | |
@error "Invalid font-weight #{$weight}"; | |
} | |
} | |
@mixin font-face-src($name, $humanized-names-list, $path){ | |
$list: (); | |
@each $humanized-name in $humanized-names-list { | |
$list: append($list,local("#{str-capitalize-words($name))} #{$humanized-name}"), comma); | |
$list: append($list,local("#{to-pascal-case($name))}-#{to-pascal-case($humanized-name)}"), comma); | |
} | |
$list: append($list, url("#{$path}.woff2") format("woff2"), comma); | |
$list: append($list, url("#{$path}.woff") format("woff"), comma); | |
src: $list; | |
} | |
/// | |
/// Outputs a modern css font-face declaration | |
/// | |
/// @group Tools | |
/// @param {String} $path - Path to your font file (no extension) | |
/// @param {String} $name ['Custom Font'] - Your font name | |
/// (yes you should keep the original, to make use of local but it's not mandatory) | |
/// @param {Number} $font-weight [400] - (100...900) | |
/// @param {String} $font-style [normal] - (Italic | Oblique | inherit | unset) | |
/// @param {String} $font-display [swap] - how a font face is displayed based on whether and when it is downloaded and ready to use. | |
/// @param {*} $unicode-range [U+000-5FF] - Download only latin glyphs | |
/// | |
/// @example markup - Preload your fonts (recommended, not required) | |
/// <head> | |
/// <link rel="preload" as="font" href="/fonts/your-web-font.woff2" type="font/woff2" crossorigin="anonymous"> | |
/// </head> | |
/// @example scss - Including using font-face | |
/// @include font-face( | |
/// $path: "/fonts/your-web-font", | |
/// $name: "Custom Font Name" | |
/// $font-weight: 500 | |
/// $font-style: normal | |
/// ) | |
/// | |
/// // Not that the name should be the same! only weight changes | |
/// @include font-face( | |
/// $path: "/fonts/your-web-font-semi-bold", | |
/// $name: "Custom Font Name" | |
/// $font-weight: 600 | |
/// $font-style: normal | |
/// ) | |
/// | |
/// @link https://equinsuocha.io/blog/web-fonts-in-2018 | |
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display | |
/// | |
@mixin font-face( | |
$path, | |
$name: "Custom Font", | |
$font-weight: 400, | |
$font-style: normal, | |
$font-display: swap, | |
$unicode-range: U+000-5FF | |
){ | |
@font-face { | |
font-family: $name; | |
font-weight: $font-weight; | |
font-style: $font-style; | |
font-display: $font-display; | |
unicode-range: $unicode-range; | |
@include font-face-src($name, humanized-font-weight(200), "asdad/ad"); | |
} | |
} | |
@include font-face( | |
"path/to/font", | |
"My Custom Font" | |
) |
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
@font-face { | |
font-family: "My Custom Font"; | |
font-weight: 400; | |
font-style: normal; | |
font-display: swap; | |
unicode-range: U+000-5FF; | |
src: local("My Custom Font Extra Light"), local("MyCustomFont-ExtraLight"), local("My Custom Font Ultra Light"), local("MyCustomFont-UltraLight"), url("asdad/ad.woff2") format("woff2"), url("asdad/ad.woff") format("woff"); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment