/// Replace `$search` with `$replace` in `$string` /// @author Hugo Giraudel /// @param {String} $string - Initial string /// @param {String} $search - Substring to replace /// @param {String} $replace ('') - New value /// @return {String} - Updated string @function str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } @return $string; } /// declare a cross-browser @font-face. /// note that Firefox is very picky about the syntax here: experimentation shows that /// the eot MUST come first (even if FF doesn't load it), and the other formats MUST /// be declared under one `src` directive. the local sources may have a separate `src`. /// @author @colin@fed.uninsane.org @mixin font-face($family, $variant, $short, $weight, $style) { $path: 'fonts/' + str-replace($family, ' ', '') + '/' + $short; $hyphenated: str-replace($variant, ' ', '-'); @font-face { font-family: $family; src: url('#{$path}.eot'); src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff2') format('woff2'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'); // TODO: local fonts disabled during devel // src: local($variant), local($hyphenated); font-weight: $weight; font-style: $style; } } body { font-family: "Gentium Basic","serif"; } /* font: Gentium Basic * upstream: https://www.fontsquirrel.com/fonts/Gentium-Basic * https://fonts.google.com/specimen/Gentium+Basic * license: SIL Open Font License 1.1 * author: SIL International */ @include font-face('Gentium Basic', 'Gentium Basic', 'GenBasR', 400, normal) @include font-face('Gentium Basic', 'Gentium Basic Bold', 'GenBasB', 700, normal) @include font-face('Gentium Basic', 'Gentium Basic Italic', 'GenBasI', 400, italic) @include font-face('Gentium Basic', 'Gentium Basic Bold Italic', 'GenBasBI', 700, italic)