Install FontSwap
Geist Mono
About Geist Mono
- 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 →Geist Mono is a monospaced typeface created by Vercel in collaboration with Basement Studio. Built specifically for code editors and terminal applications, it offers excellent legibility at small sizes with distinctive character differentiation.
History and Design
Geist Mono was designed alongside Geist Sans as part of Vercel's type system. The monospaced variant prioritizes the specific needs of developers — clear distinctions between similar characters (1, l, I and 0, O), comfortable reading at small sizes, and consistent alignment in code blocks.
Best Use Cases
Geist Mono excels in:
- Code editors: Syntax-highlighted source code display
- Terminal applications: Command-line interfaces, log output
- Technical documentation: Inline code snippets, API examples
- Data display: Tabular data, financial figures, timestamps
Usage Tips
Use Geist Mono at 13-16px for comfortable code reading. The variable weight axis enables subtle emphasis without disrupting monospace alignment. Weight 400 works well for code, while 600-700 suits terminal headers. Pairs naturally with Geist Sans for surrounding UI text.
Is Geist Mono on Google Fonts?
Yes, Geist Mono is available for free on Google Fonts. Get Geist Mono on Google Fonts ↗
Alternative For (5)
Geist Mono is a free alternative to the following premium fonts:
Compare Geist Mono
See how Geist Mono compares to other fonts side by side.
Variable Font Axes
Geist Mono is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
Font Pairings
Fonts that pair well with Geist Mono based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Geist Mono in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Courier New to minimize layout shift when loading Geist Mono.
@font-face {
font-family: 'Geist Mono Fallback';
src: local('Courier New');
ascent-override: 100.5%;
descent-override: 29.5%;
line-gap-override: 0%;
size-adjust: 106%;
}How to Use Geist Mono
Copy these code snippets to quickly add Geist Mono to your project.
CSS code for Geist Mono
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');HTML code for Geist 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=Geist+Mono:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Geist Mono
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'geist-mono': ['"Geist Mono"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-geist-mono">Your text here</p>Next.js code for Geist Mono
// Using next/font (Next.js 13+)
import { Geist_Mono } from 'next/font/google';
const geist_mono = Geist_Mono({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={geist_mono.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Geist Mono"' }}>Your text</p>Expo and React Native code for Geist Mono
// Install: npx expo install @expo-google-fonts/geist-mono expo-font
import { useFonts, Geist_Mono_400Regular } from '@expo-google-fonts/geist-mono';
export default function App() {
const [fontsLoaded] = useFonts({
Geist_Mono_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Geist_Mono_400Regular' }}>
Your text here
</Text>
);
}