Sass Import

When using Fontsource in a Sass/SCSS project, you can import the CSS font stylesheets using the @use rule.

Installation

For the most basic usage of importing Fontsource CSS stylesheets, you can use the @use rule in your Sass/SCSS file. Here’s an example of importing the Open Sans font:

@use "pkg:@fontsource/open-sans/index.css";

Note: The pkg: prefix is required to import packages from the npm registry. You must use the NodePackageImporter() in your Sass compiler to resolve these imports. Learn more in the Sass Introduction guide.

You can also import specific font variations if needed:

@use "pkg:@fontsource/open-sans/300.css" as OpenSansLight;
@use "pkg:@fontsource/open-sans/700-italic.css" as OpenSansBoldItalic;

Usage

Once you have imported the Fontsource stylesheets, the font styles will be available for use in your project. You can apply the imported font styles to elements using the font-family property in your CSS rules. Here’s an example:

body {
  font-family: "Open Sans", sans-serif;
}