Fira Code font

Fira Code is a Google Font monospace family, free for commercial use on Google Fonts. Built for code samples, developer docs, and technical brand kits.

Monospace · Google Fonts · Commercial free

Fira Code

Use in playground

Fira Code is a Google Font monospace family, free for commercial use on Google Fonts. Built for code samples, developer docs, and technical brand kits.

Weight 400

The quick brown fox

Weight 500

The quick brown fox

Weight 600

The quick brown fox

Weight 700

The quick brown fox

Character set

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Display sample

Build your brand kit with Fira Code

Body sample

Use Fira Code in landing pages, dashboards, and DESIGN.md exports. Pair it with a complementary body font for readable paragraphs and UI labels.

Popular pairings

Fira Code + Inter

Embed code

Copy the snippet for your stack — same pattern as Google Fonts, ready for production sites and AI agent repos.

HTML link tag

html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap" rel="stylesheet" />

CSS @import

css

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap');

body {
  font-family: 'Fira Code', monospace;
}

CSS font-family

css

.font-fira-code {
  font-family: 'Fira Code', monospace;
  font-weight: 400;
}

Next.js next/font/google

typescript

import { Fira_Code } from "next/font/google";

const font = Fira_Code({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-fira-code",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={font.variable}>
      <body>{children}</body>
    </html>
  );
}

Tailwind CSS

css

@import "tailwindcss";

@theme {
  --font-fira-code: 'Fira Code', monospace;
}

/* Usage: class="font-[family-name:var(--font-fira-code)]" */

DESIGN.md snippet

markdown

## Typography

- **Headline font:** Fira Code (Google Fonts)
- **CSS stack:** 'Fira Code', monospace
- **Weights:** 400;500;600;700

```html
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap" rel="stylesheet" />
```

Best for

Code blocks
Developer docs
Terminal UI
API references