Sass Mixins


A basic implementation into your typical project that compiles with Sass/SCSS is the following:

@import "~@fontsource/open-sans/index.css";
@import "~@fontsource/open-sans/300-italic.css";

@use


For more advanced setups, you can use our highly customizable Sass mixins that can modify many of the existing @font-face variables.

You can view what the full SCSS file looks like here.

@use "@fontsource/open-sans/scss/mixins" as OpenSans;

FontFace Mixin


Generates a CSS file similar to this where all unicode-range subsets are generated using the @each Sass function.

@include OpenSans.fontFace(
$weight: 500,
$display: fallback,
$fontDir: "~@fontsource/open-sans/files"
);

FontFace Mixin Inputs


Only supported by Google fonts. For fonts outside that ecosystem, only fontFaceCustom is usable.

VariableCSS SelectorOptionsDefault
$weightfont-weightVaries per font package.400
$stylefont-stylenormal, italicnormal
$displayfont-displayauto, block, swap, fallback, optionalswap
$fontNamefont-familyUp to user preference.Varies per font package.
$fontIdN/AUsed to resolve default $fontDir.Varies per font package.
$fontDirsrcDirectory where all font files are."~@fontsource/#{$fontId}/files"
$unicodeMapunicode-rangeKey value pair of subsets and unicode values.Varies per font package.

FontFaceCustom Mixin


For a far more granular mixin that removes the @each function and allows the developer to specify additional parameters such as including unicode-range or choosing different paths for either the woff or woff2 file.

@include OpenSans.fontFaceCustom(
$weight: 600,
$display: optional,
$woff2Path: "~@fontsource/open-sans/files/open-sans-latin-500-normal.woff2",
$unicodeRange: false
);

FontFaceCustom Mixin Inputs


Included in both Google and other font foundry families.

VariableCSS SelectorOptionsDefault
$weightfont-weightVaries per font package.400
$stylefont-stylenormal, italicnormal
$displayfont-displayauto, block, swap, fallback, optionalswap
$fontNamefont-familyUp to user preference.Varies per font package.
$fontIdN/AUsed to resolve default font file paths.Varies per font package.
$woff2PathsrcDirect filepath to WOFF2 font file."~@fontsource/#{$fontId}/files/#{$fontId}-latin-#{$weight}-#{$style}.woff2"
$woffPathsrcDirect filepath to WOFF font file."~@fontsource/#{$fontId}/files/#{$fontId}-latin-#{$weight}-#{$style}.woff"
$unicodeRangeunicode-rangetrue, falsefalse
$unicodeRangeValuesunicode-rangeValues for unicode-range.Latin unicode range.

Legacy Sass Implementations


@use is only compatible with Dart Sass. @import is for all other deprecated Sass implementations.

@import "~@fontsource/open-sans/scss/mixins";
@include fontFace(
$weight: 500,
$display: fallback,
$fontDir: "~@fontsource/open-sans/files"
);
@include fontFaceCustom(
$weight: 600,
$display: optional,
$woff2Path: "~@fontsource/open-sans/files/open-sans-latin-500-normal.woff2",
$unicodeRange: false
);