Install FontSwap
Fira Mono
About Fira Mono
- Source
- Google Fonts ↗
- Classification
- mono
- Weights
- 400, 500, 700
- Features
- Standard
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 Mono is a free monospace font designed by Carrois Apostrophe for Mozilla, created as part of the Firefox OS visual identity. It serves as the foundation for the popular Fira Code, but without programming ligatures.
History and Design
Mozilla commissioned Fira Mono (along with Fira Sans) for Firefox OS, their mobile operating system project. The font was designed by Ralph du Carrois and incorporates the same clean, modern aesthetic that defines the Fira family. When Firefox OS was discontinued, the fonts remained as valuable open-source resources.
Why Fira Mono is Reliable
Fira Mono offers straightforward excellence for coding:
- Mozilla pedigree: Professional design for a major platform
- Clean simplicity: No ligatures means pure character display
- Fira family: Pairs perfectly with Fira Sans
- Proven foundation: The basis for Fira Code's success
- Broad support: Works reliably everywhere
Technical Features
- Weights available: Regular (400), Medium (500), Bold (700)
- No ligatures: Characters render individually
- Character distinction: Clear separation of similar glyphs
- Language support: Full Latin, Cyrillic, Greek coverage
- Consistent metrics: Identical spacing to Fira Sans Mono
Best Use Cases
Fira Mono excels in:
- Terminal applications: Clean, straightforward rendering
- Environments without ligature support: Universal compatibility
- Legacy editors: Works in any code editor
- Web development: Easy to embed, reliable rendering
Usage Tips
If you want the same font with ligatures, use Fira Code instead. For ligature-free coding, Fira Mono at weight 400 provides excellent readability. Medium (500) works well for presentations. Bold (700) for emphasis in documentation. Pair with Fira Sans for UI elements to maintain the Mozilla aesthetic.
Is Fira Mono on Google Fonts?
Yes, Fira Mono is available for free on Google Fonts. Get Fira Mono on Google Fonts ↗
Alternative For (4)
Fira Mono is a free alternative to the following premium fonts:
Mozilla's clean monospace without ligatures for straightforward code display
Compare Fira Mono
See how Fira Mono compares to other fonts side by side.
Font Pairings
Fonts that pair well with Fira Mono based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Fira Mono in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Courier New to minimize layout shift when loading Fira Mono.
@font-face {
font-family: 'Fira Mono Fallback';
src: local('Courier New');
ascent-override: 93.5%;
descent-override: 26.5%;
line-gap-override: 0%;
size-adjust: 105.4%;
}How to Use Fira Mono
Copy these code snippets to quickly add Fira Mono to your project.
CSS code for Fira Mono
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');HTML code for Fira Mono
<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+Mono:wght@400;500;700&display=swap" rel="stylesheet">Tailwind code for Fira Mono
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'fira-mono': ['"Fira Mono"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-fira-mono">Your text here</p>Next.js code for Fira Mono
// Using next/font (Next.js 13+)
import { Fira_Mono } from 'next/font/google';
const fira_mono = Fira_Mono({
subsets: ['latin'],
weight: ['400', '500', '700'],
});
export default function Component() {
return (
<p className={fira_mono.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Fira Mono"' }}>Your text</p>Expo and React Native code for Fira Mono
// Install: npx expo install @expo-google-fonts/fira-mono expo-font
import { useFonts, Fira_Mono_400Regular } from '@expo-google-fonts/fira-mono';
export default function App() {
const [fontsLoaded] = useFonts({
Fira_Mono_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Fira_Mono_400Regular' }}>
Your text here
</Text>
);
}