Web Font Weight and Style Mixin [Code Snippet]

Category: Code Snippets
Written by: Jacob Lett

If you are using Google Fonts or a custom web font, you probably are writing different font weights and styles. These mixins combine the two to make it really easy to update a global font style in your stylesheet.

@mixin font-xlight {
font-weight: 200;
font-style: normal;
}

@mixin font-xlight-italic {
font-weight: 200;
font-style: italic;
}

@mixin font-light {
font-weight: 300;
font-style: normal;
}

@mixin font-light-italic {
font-weight: 300;
font-style: italic;
}

@mixin font-book {
font-weight: 400;
font-style: normal;
}

@mixin font-book-italic {
font-weight: 400;
font-style: italic;
}

@mixin font-medium {
font-weight: 500;
font-style: normal;
}

@mixin font-medium-italic {
font-weight: 500;
font-style: italic;
}

@mixin font-bold {
font-weight: 700;
font-style: normal;
}

@mixin font-bold-italic {
font-weight: 700;
font-style: italic;
}

@mixin font-black {
font-weight: 800;
font-style: normal;
}

@mixin font-black-italic {
font-weight: 800;
font-style: italic;
}