Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass Mixin for typekit variation-specific font-family names
Sass Mixin for typekit variation-specific font-family names
Typekit IE6-8 Support (http://help.typekit.com/customer/portal/articles/6855-Using-multiple-weights-and-styles)
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
// Must include fallbacks for EACH typekit font — set them each as variables
//************************************************************************//
$typekit-fonts: "source-sans-pro", "ff-tisa-web-pro"; // index [1, 2]
$typekit-fallbacks: $lucida-grande, $georgia;
@mixin font($weight: 400, $style: normal, $font: 1) {
$font-weight: $weight;
$font-style: $style;
// Translate Weight
@if ($weight == 100) or ($weight == thin) or ($weight == ultralight) {
$weight: 1;
}
@if ($weight == 200) or ($weight == extralight) {
$weight: 2;
}
@if ($weight == 300) or ($weight == light) {
$weight: 3;
}
@if ($weight == 400) or ($weight == normal) or ($weight == book) {
$weight: 4;
}
@if ($weight == 500) or ($weight == medium) {
$weight: 5;
}
@if ($weight == 600) or ($weight == semibold) or ($weight == demi) {
$weight: 6;
}
@if ($weight == 700) or ($weight == bold) {
$weight: 7;
}
@if ($weight == 800) or ($weight == extrabold) {
$weight: 8;
}
@if ($weight == 900) or ($weight == black) or ($weight == heavy) {
$weight: 9;
}
// Translate Style
@if $style == normal {
$style: n;
}
@else if $style == italic {
$style: i;
}
// Assemble $font-family
$primary-font: nth($typekit-fonts, $font) + "-" + $style + $weight;
$secondary-font: nth($typekit-fonts, $font);
$fallback-fonts: nth($typekit-fallbacks, $font);
$font-family: quote($primary-font), quote($secondary-font), $fallback-fonts;
font-family: $font-family;
font-style: $font-style;
font-weight: $font-weight;
}
//Example #1:
//************************************************************************//
h1 {
@include font (bold);
}
h1 {
font-family: "source-sans-pro-n7", "source-sans-pro", "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
}
//Example #2:
//************************************************************************//
h2 {
@include font (300, italic, 2);
}
h2 {
font-family: "ff-tisa-web-pro-n4", "ff-tisa-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
font-style: italic;
font-weight: 300;
}
// Used in conjunction with bourbon: http://thoughtbot.com/bourbon
@danielhaim1

This comment has been minimized.

Copy link

@danielhaim1 danielhaim1 commented Apr 24, 2016

This is what I was looking for 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment