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