Font family SASS for different webfonts

When loading in different webfonts, google fonts or from another library they can work differently, the css ‘font-style: italic’ or ‘font-weight: bold;’ may need to work differently, depending on which you are using.

To build our framework to best accommodate either we have setup SASS mixins for common font settings.

// FONT FAMILY
@mixin mixin-font-family-main-regular () {
	font-family: $font_family-main;
	font-style: normal;
	font-weight:  normal;
}
@mixin mixin-font-family-main-bold () {
	font-family: $font_family-main;
	font-style: normal;
	font-weight:  700;
}
@mixin mixin-font-family-main-light () {
	font-family: $font_family-main;
	font-style: normal;
	font-weight:  300;
}
@mixin mixin-font-family-main-italic () {
	font-family: $font_family-main;
	font-style: italic;
	font-weight:  normal;
}
@mixin mixin-font-family-heading () {
	font-family: $font_family-main;
	font-style: normal;
	font-weight:  700;
}
@mixin mixin-font-family-display () {
	font-family: $font_family-display;
	font-style: normal;
	font-weight:  700;
}
@mixin mixin-font-family-quote () {
	font-family: $font_family-main;
	font-style: italic;
	font-weight:  normal;
}
@mixin mixin-font-family-awesome () {
	font-family: $font_family-awesome;
	font-weight:  normal;
    font-style: normal;
    font-variant: normal;
}
@mixin mixin-font-family-awesome-solid () {
	font-family: $font_family-awesome;
	font-weight:  900;
    font-style: normal;
    font-variant: normal;
}

With this in place we shouldn’t use font-family, font-weight or font-style individually in the SASS or include files.

In addition ‘font-display: $font_display;’ can be set on the body of the site, and font-smoothing.

body {
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-display: $font_display;
}

Search the site


Address

123 Main Street
Town
City
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899

Email: ben@gomopress.com


Copyright 2023. Blah blah blah Company Limited