Skip to content

Fontsource

Self-host Open Source fonts in neatly bundled NPM packages.

Install the Package 

npm install @fontsource/open-sans

Variable Fonts

참고로 Variable Font 는 다음과 같이 설치: 

npm install @fontsource-variable/roboto-flex

Import the Font

In your application’s entry file, page, or site component, import the font package using the package name. For example, to import Open Sans into index.jsx, add the following code: 

import "@fontsource/open-sans"; // Defaults to weight 400.

Weights and Styles

If you only need specific font weights or styles, you can import them individually to reduce the payload size. Fontsource allows you to select weights and styles precisely. To import a specific weight or style, use the corresponding imports. For example: 

import "@fontsource/open-sans/500.css"; // Weight 500.
import "@fontsource/open-sans/900-italic.css"; // Italic variant.

CSS

Once the font is imported, you can reference it in your CSS stylesheets, CSS Modules, or CSS-in-JS. Use the font family name associated with the font package you installed. For example: 

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

See also

Favorite site