Created
March 2, 2012 12:48
-
-
Save textandhypertext/1958208 to your computer and use it in GitHub Desktop.
Sass mixin for @font-face with styles and weights
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($family, $style, $weight) | |
| $prefix = "'type/" +$family + $style + $weight | |
| @font-face | |
| font: | |
| family: $family | |
| style: $style | |
| weight: $weight | |
| src: url($prefix + ".eot?#iefix'") format('embedded-opentype') | |
| src: url($prefix + ".woff'" ) format('woff') | |
| src: url($prefix + ".ttf'") format('truetype') | |
| src: url($prefix + ".svg#svg" + $family + $style + $weight + "'") format('svg') |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sass mixin for @font-face. This revision is up-to-date with @font-face syntax and accommodates font families with additional weights and styles.
In order for it to work, rename the font files so that the style and weight appear in the filename as they would appear in the compiled CSS, e.g. "MyFontbolditalic". The obnoxious thing is that the regular style would have to be "MyFontnormalnormal", otherwise you'd have to write a mixin for every style and weight combination. If you happen to know a way around this, please let me know.