Skip to content

Instantly share code, notes, and snippets.

@kirpalmakanga
Created September 22, 2015 16:41
Show Gist options
  • Save kirpalmakanga/e68671d664ea7ab5cb89 to your computer and use it in GitHub Desktop.
Save kirpalmakanga/e68671d664ea7ab5cb89 to your computer and use it in GitHub Desktop.
SCSS Font-Face Mixin
@mixin font-face($font-family, $file-path, $font-weight, $font-style) {
@font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
font-weight: $font-weight;
font-style: $font-style;
}
// Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@font-face {
font-family: $font-family;
src: url('#{$file-path}.svg##{$font-family}') format('svg');
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment