Skip to content

Instantly share code, notes, and snippets.

@brandondurham
Last active December 31, 2015 01:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save brandondurham/7913438 to your computer and use it in GitHub Desktop.
Save brandondurham/7913438 to your computer and use it in GitHub Desktop.
SASS Mixin for use with the Cloud.typography service.
@mixin font-stack($family, $weight, $size: inherit, $line-height: inherit, $style: normal, $stack: '"Lucida Grande", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif') {
@if $weight >= 6 { -webkit-font-smoothing: antialiased; } // Sharpen up the bold text
font: {
@if $style == normal {
family: "#{$family} #{$weight}r", "#{$family} A", "#{$family} B", unquote($stack);
}
@else if $style == italic {
family: "#{$family} #{$weight}i", "#{$family} A", "#{$family} B", unquote($stack);
}
size: $size;
style: $style;
@if type-of($weight) == number { weight: $weight * 100; } // This just allows you to enter a weight of something like "7" instead of "700"
@else { weight: $weight; }
}
line-height: $line-height;
}
h1 {
@include font-stack("Chronicle Display", 7, 42px, 1);
}
p {
@include font-stack("Gotham SSm", 5, 17px, 1.2);
}
h1 {
-webkit-font-smoothing: antialiased;
font-family: "Chronicle Display 7r", "Chronicle Display A", "Chronicle Display B", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment