Skip to content

Instantly share code, notes, and snippets.

@isitannarli
Last active January 23, 2018 07:05
Show Gist options
  • Select an option

  • Save isitannarli/d868493855dc2ea5e5e1cf0389a5728e to your computer and use it in GitHub Desktop.

Select an option

Save isitannarli/d868493855dc2ea5e5e1cf0389a5728e to your computer and use it in GitHub Desktop.
Sass Font Include Mixin
/**
* Font Name: Proxima Nova
* Font Folder Name: /var/www/project/assets/fonts/proxima-nova
* Font File Name (Regular): /var/www/project/assets/fonts/proxima-nova/proxima-nova-regular.ttf
* Font File Name (Bold): /var/www/project/assets/fonts/proxima-nova/proxima-nova-bold.ttf
*
* Use Mixin: @include font-include('Proxima Nova', 'proxima-nova', 'proxima-nova');
*/
@mixin font-include($font-name, $font-dir-name, $font-file-name) {
$weight: (
'thin': 100,
'light': 300,
'regular': 400,
'medium': 500,
'semibold': 600,
'bold': 700,
'extra-bold': 800,
'black': 900
);
@each $var, $index in $weight {
$fontUrl: 'fonts/#{$font-dir-name}/#{$font-file-name}-#{$var}';
@font-face {
font-family: $font-name;
font-style: normal;
font-weight: $index;
src: url(.eot);
src: url(#{$fontUrl}.eot?#iefix) format('embedded-opentype'),
url(#{$fontUrl}.woff2) format('woff2'),
url(#{$fontUrl}.woff) format('woff'),
url(#{$fontUrl}.ttf) format('truetype');
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment