Sass Import

When using Fontsource in a Sass/SCSS project, you can import the font stylesheets using the @import rule. This guide explains how to import Fontsource in your Sass/SCSS files.


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


@import "~@fontsource/open-sans";


The ~ symbol before the font package name is a shortcut that tells the Sass compiler to resolve the import path based on your project’s configuration.

You can also import specific font variations if needed:


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



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;



For more advanced usage, you can use the Fontsource Sass mixins to generate a highly customizable CSS file for your font.