Install FontSwap
Fira Code
About Fira Code
- Source
- Google Fonts ↗
- Classification
- mono
- Weights
- Variable (100-900)
- Features
- Variable
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →Fira Code is a free monospace font with programming ligatures, created by Nikita Prokopov based on Mozilla's Fira Mono. It has become one of the most widely adopted coding fonts due to its extensive ligature support and excellent readability.
History and Design
Fira Code was developed by Nikita Prokopov starting in 2014, building on Fira Mono which Mozilla created for Firefox OS. The key innovation was adding programming ligatures—contextual character combinations that render common coding symbols as connected glyphs, making code easier to scan and understand.
Why Fira Code is Popular
Fira Code has earned its position as a developer favorite:
- Extensive ligatures: Over 100 programming ligatures
- Mozilla heritage: Built on the solid foundation of Fira Mono
- Wide adoption: Supported in virtually every code editor
- Active development: Continuous updates and improvements
- Variable font: Smooth weight adjustments in supporting applications
Technical Features
- Weight range: 300-700 (Variable font support)
- Ligature coverage: Comprehensive set for most programming languages
- Character variants: Multiple stylistic alternates available
- Powerline symbols: Built-in support for terminal status lines
- Broad compatibility: Works in almost every development environment
Best Use Cases
Fira Code excels in:
- Any code editor: Universal IDE support
- Terminal and shell: Clean rendering with Powerline support
- Web development: Popular choice in web dev community
- Documentation: Code examples that look professional
Usage Tips
Most editors require enabling ligatures in settings. In VS Code, add "editor.fontLigatures": true to settings.json. Use weight 400 for regular coding, 300 for high-density displays, or 500 for streaming/presentations. Fira Code pairs well with Fira Sans for UI text, creating a cohesive type system.
Is Fira Code on Google Fonts?
Yes, Fira Code is available for free on Google Fonts. Get Fira Code on Google Fonts ↗
Alternative For (13)
Fira Code is a free alternative to the following premium fonts:
Fira Mono with programming ligatures for enhanced code readability
Compare Fira Code
See how Fira Code compares to other fonts side by side.
Variable Font Axes
Fira Code is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 300 | 400 | 700 |
Font Pairings
Fonts that pair well with Fira Code based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Fira Code in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Courier New to minimize layout shift when loading Fira Code.
@font-face {
font-family: 'Fira Code Fallback';
src: local('Courier New');
ascent-override: 99%;
descent-override: 32.2%;
line-gap-override: 0%;
size-adjust: 105.3%;
}How to Use Fira Code
Copy these code snippets to quickly add Fira Code to your project.
CSS code for Fira Code
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@100..900&display=swap');HTML code for Fira Code
<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@100..900&display=swap" rel="stylesheet">Tailwind code for Fira Code
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'fira-code': ['"Fira Code"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-fira-code">Your text here</p>Next.js code for Fira Code
// Using next/font (Next.js 13+)
import { Fira_Code } from 'next/font/google';
const fira_code = Fira_Code({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={fira_code.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Fira Code"' }}>Your text</p>Expo and React Native code for Fira Code
// Install: npx expo install @expo-google-fonts/fira-code expo-font
import { useFonts, Fira_Code_400Regular } from '@expo-google-fonts/fira-code';
export default function App() {
const [fontsLoaded] = useFonts({
Fira_Code_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Fira_Code_400Regular' }}>
Your text here
</Text>
);
}