Last active
February 1, 2022 12:29
-
-
Save Limonadovy-joe/b0187ad4af1fe9be0a4320fcf4185b8f to your computer and use it in GitHub Desktop.
Create font-face with support for old browsers
This file contains hidden or 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
| @use "sass:map"; | |
| @use "sass:string"; | |
| @import "./_helpers.scss"; | |
| @import "./_variables.scss"; | |
| /// Output a @font-face declaration | |
| /// @access public | |
| /// @group webfonts | |
| /// @param {String} $font-family - name of font-family | |
| /// @param {String} $path - address of the source font, can be an absolute HTPP or relative | |
| /// @param {Number} $weight | |
| /// @param {String} $style | |
| /// @param {List} $extensions - single extensions of font files to include in src | |
| /// @require {String} $theme-webfonts-base-url - base url of webfonts, can be an absolute HTPP or relative | |
| @mixin font-face( | |
| $family, | |
| $path, | |
| $weight: 400, | |
| $style: normal, | |
| $exts: eot eotfix woff2 woff ttf otf svg | |
| ) { | |
| $src: $webfonts-base-url; | |
| //types of font files that have different names of format with compared to its extensions | |
| $formats: ( | |
| otf: "opentype", | |
| ttf: "truetype", | |
| eotfix: "embedded-opentype", | |
| ); | |
| @each $ext in $exts { | |
| $ext-types-with-postfix: ( | |
| eotfix: ( | |
| //IE6-IE8 | |
| format: | |
| "?#iefix", | |
| addition: "eot", | |
| pos: "start", | |
| ), | |
| svg: ( | |
| //Legacy iOS | |
| format: | |
| "svg#", | |
| addition: #{$family}, | |
| pos: "end", | |
| ), | |
| ); | |
| $ext-type: if( | |
| map.has-key($ext-types-with-postfix, $ext), | |
| map.get($ext-types-with-postfix, $ext, "format"), | |
| quote($ext) | |
| ); | |
| $format: if( | |
| map.has-key($formats, $ext), | |
| map.get($formats, $ext), | |
| quote($ext) | |
| ); | |
| //additional insert values to ext-type | |
| @if map.has-key($ext-types-with-postfix, $ext) { | |
| $addition: map.get($ext-types-with-postfix, $ext, "addition"); | |
| $pos: map.get($ext-types-with-postfix, $ext, "pos"); | |
| $ext-type: str-insert($ext-type, $addition, $pos); | |
| } | |
| $font-url: url($path + "." + $ext-type); | |
| $font-format: format($format); | |
| $font-src: $font-url $font-format; | |
| $src: append($src, $font-src, comma); | |
| } | |
| @font-face { | |
| font-family: $family; | |
| font-style: $style; | |
| font-weight: $weight; | |
| src: $src; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment