Roboto Flex
Getting Started
Installation
Install the variable version of this font by running the following command:
⬤⬤
npm install @fontsource-variable/roboto-flex
sh
⬤⬤
yarn add @fontsource-variable/roboto-flex
sh
⬤⬤
pnpm add @fontsource-variable/roboto-flex
sh
⬤⬤
bun add @fontsource-variable/roboto-flex
sh
Import
Include the following line in the root layout of your project to import the font:
⬤⬤
// Supports only weight 400import '@fontsource-variable/roboto-flex';
jsx
CSS
Include the CSS in your project by adding the following line to your project:
⬤⬤
body {font-family: 'Roboto Flex 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:
⬤⬤
/* roboto-flex-latin-wght-normal */@font-face {font-family: 'Roboto Flex Variable';font-style: normal;font-display: swap;font-weight: 100 1000;src: url(@fontsource-variable/roboto-flex/files/roboto-flex-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+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: 'Roboto Flex Variable', sans-serif;}
css
Installation
Install the static version of this font by running the following command:
⬤⬤
npm install @fontsource/roboto-flex
sh
⬤⬤
yarn add @fontsource/roboto-flex
sh
⬤⬤
pnpm add @fontsource/roboto-flex
sh
⬤⬤
bun add @fontsource/roboto-flex
sh
Import
Include the following line in the root layout of your project to import the font:
⬤⬤
import '@fontsource/roboto-flex';
jsx
CSS
Include the CSS in your project by adding the following line to your project:
⬤⬤
body {font-family: 'Roboto Flex', 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:
⬤⬤
/* roboto-flex-latin-400-normal */@font-face {font-family: 'Roboto Flex';font-style: normal;font-display: swap;font-weight: 400;src: url(@fontsource/roboto-flex/files/roboto-flex-latin-400-normal.woff2) format('woff2'), url(@fontsource/roboto-flex/files/roboto-flex-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+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: 'Roboto Flex', sans-serif;}
css