Open Sans
Getting Started
Installation
Install the variable version of this font by running the following command:
⬤⬤
npm install @fontsource-variable/open-sans
sh
⬤⬤
yarn add @fontsource-variable/open-sans
sh
⬤⬤
pnpm add @fontsource-variable/open-sans
sh
⬤⬤
bun add @fontsource-variable/open-sans
sh
Import
Include the following line in the root layout of your project to import the font:
⬤⬤
// Supports weights 300-800import '@fontsource-variable/open-sans';
jsx
CSS
Include the CSS in your project by adding the following line to your project:
⬤⬤
body {font-family: 'Open Sans Variable', sans-serif;}
css
Note: Advanced usage is recommended for users who explicitly need to control their @font-face declarations and is only compatible with Vite-based frameworks or similar.Subsets
Variants
Display
Copy CSS
Import this into your global CSS file. Your bundler will automatically rewrite the URL into a useable asset:
⬤⬤
/* open-sans-latin-wght-normal */@font-face {font-family: 'Open Sans Variable';font-style: normal;font-display: swap;font-weight: 300 800;src: url(@fontsource-variable/open-sans/files/open-sans-latin-wght-normal.woff2) format('woff2-variations');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
css
Then include the following CSS in your project:
⬤⬤
body {font-family: 'Open Sans Variable', sans-serif;}
css
Installation
Install the static version of this font by running the following command:
⬤⬤
npm install @fontsource/open-sans
sh
⬤⬤
yarn add @fontsource/open-sans
sh
⬤⬤
pnpm add @fontsource/open-sans
sh
⬤⬤
bun add @fontsource/open-sans
sh
Import
Include the following line in the root layout of your project to import the font:
⬤⬤
import '@fontsource/open-sans';
jsx
CSS
Include the CSS in your project by adding the following line to your project:
⬤⬤
body {font-family: 'Open Sans', sans-serif;}
css
Note: Advanced usage is recommended for users who explicitly need to control their @font-face declarations and is only compatible with Vite-based frameworks or similar.Subsets
Weights
Display
Formats
Copy CSS
Import this into your global CSS file. Your bundler will automatically rewrite the URL into a useable asset:
⬤⬤
/* open-sans-latin-400-normal */@font-face {font-family: 'Open Sans';font-style: normal;font-display: swap;font-weight: 400;src: url(@fontsource/open-sans/files/open-sans-latin-400-normal.woff2) format('woff2'), url(@fontsource/open-sans/files/open-sans-latin-400-normal.woff) format('woff');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
css
Then include the following CSS in your project:
⬤⬤
body {font-family: 'Open Sans', sans-serif;}
css