Skip to content

Instantly share code, notes, and snippets.

@jenofdoom

jenofdoom/_mixins.scss

Created December 5, 2018 03:19
Show Gist options
  • Save jenofdoom/fd08b48b316823c0cb8bf0ff81a35194 to your computer and use it in GitHub Desktop.
Save jenofdoom/fd08b48b316823c0cb8bf0ff81a35194 to your computer and use it in GitHub Desktop.
Download ZIP
Modern browsers webfont mixin
Raw
_mixins.scss
// update paths as needed if /fonts/ is not right for your site
@mixin font-face($fontname, $filename: $fontname, $weight: normal, $style: normal) {
@font-face {
font-family: $fontname;
src: url('/fonts/#{$filename}.woff2') format('woff2'),
url('/fonts/#{$filename}.woff') format('woff');
font-weight: $weight;
font-style: $style;
}
}
Raw
example.scss
@include font-face('Source Sans Pro', 'source-sans-pro-v11-latin-ext_latin-regular');
@include font-face('Source Sans Pro', 'source-sans-pro-v11-latin-ext_latin-italic', 400, italic);
@include font-face('Source Sans Pro', 'source-sans-pro-v11-latin-ext_latin-700', 700);
@include font-face('Source Sans Pro', 'source-sans-pro-v11-latin-ext_latin-700-italic', 700, italic);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment