Web Font Weight and Style Mixin [Code Snippet]


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;
}

 



Written by: Jake Lett
Jake Lett is a B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Related posts

Tags:

Want to Get Email Updates of New Articles?

Join My Email Newsletter