Mixin for @font-face

// ============================================================================= // String Replace // (https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6) // ============================================================================= @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; } // ============================================================================= // Font Face // (https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6) // // Example usage // @include font-face("Gotham-Black", "fonts/gotham/Gotham-Black", null, null, otf ttf); // ============================================================================= @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) { $src: null; $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_") ); $formats: ( otf: "opentype", ttf: "truetype" ); @each $ext in $exts { $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext); $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext); $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma); } @font-face { font-family: quote($name); font-style: $style; font-weight: $weight; src: $src; } }
A mixin for writing @font-face rules in SCSS (taken from https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6 )

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.