Fira Sans Extra Condensed

sans-serif

google

Getting Started

Installation

Install the variable version of this font by running the following command:

⬤⬤

npm install @fontsource-variable/fira-sans-extra-condensed

⬤⬤

yarn add @fontsource-variable/fira-sans-extra-condensed

⬤⬤

pnpm add @fontsource-variable/fira-sans-extra-condensed

⬤⬤

bun add @fontsource-variable/fira-sans-extra-condensed

Import

Include the following line in the root layout of your project to import the font:

100

200

300

400

500

600

700

800

900

italic

⬤⬤

import '@fontsource/fira-sans-extra-condensed';

jsx

CSS

Include the CSS in your project by adding the following line to your project:

⬤⬤

body {
  font-family: 'Fira Sans Extra Condensed', 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

cyrillic

cyrillic-ext

greek

greek-ext

latin

latin-ext

vietnamese

Weights

100

200

300

400

500

600

700

800

900

italic

Display

auto

swap

block

fallback

optional

Formats

woff2

woff

Copy CSS

Import this into your global CSS file. Your bundler will automatically rewrite the URL into a useable asset:

⬤⬤

/* fira-sans-extra-condensed-latin-400-normal */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(@fontsource/fira-sans-extra-condensed/files/fira-sans-extra-condensed-latin-400-normal.woff2) format('woff2'), url(@fontsource/fira-sans-extra-condensed/files/fira-sans-extra-condensed-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: 'Fira Sans Extra Condensed', sans-serif;
}

css

Installation

Install the static version of this font by running the following command:

⬤⬤

npm install @fontsource/fira-sans-extra-condensed

⬤⬤

yarn add @fontsource/fira-sans-extra-condensed

⬤⬤

pnpm add @fontsource/fira-sans-extra-condensed

⬤⬤

bun add @fontsource/fira-sans-extra-condensed

Import

Include the following line in the root layout of your project to import the font:

100

200

300

400

500

600

700

800

900

italic

⬤⬤

import '@fontsource/fira-sans-extra-condensed';

jsx

CSS

Include the CSS in your project by adding the following line to your project:

⬤⬤

body {
  font-family: 'Fira Sans Extra Condensed', 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

cyrillic

cyrillic-ext

greek

greek-ext

latin

latin-ext

vietnamese

Weights

100

200

300

400

500

600

700

800

900

italic

Display

auto

swap

block

fallback

optional

Formats

woff2

woff

Copy CSS

Import this into your global CSS file. Your bundler will automatically rewrite the URL into a useable asset:

⬤⬤

/* fira-sans-extra-condensed-latin-400-normal */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(@fontsource/fira-sans-extra-condensed/files/fira-sans-extra-condensed-latin-400-normal.woff2) format('woff2'), url(@fontsource/fira-sans-extra-condensed/files/fira-sans-extra-condensed-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: 'Fira Sans Extra Condensed', sans-serif;
}

css

Font Details

Downloads: 217.1K

Last Modified: 2025-09-16

Github

NPM