Install FontSwap
Inconsolata
About Inconsolata
- 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 →Inconsolata is a free monospace font designed by Raph Levien, created specifically as an open-source alternative to Consolas. Released in 2006, it was one of the first high-quality free coding fonts available.
History and Design
Raph Levien designed Inconsolata to provide a free font with similar characteristics to Consolas—humanist touches within a monospace structure. The design uses subtle curves and carefully balanced proportions to create a warm, readable coding experience without the licensing restrictions of proprietary fonts.
Why Inconsolata is a Classic
Inconsolata has stood the test of time as a coding font staple:
- Consolas alternative: Explicitly designed to match its feel
- Humanist warmth: Curved strokes add personality
- Pioneer status: One of the first quality free coding fonts
- Google Fonts integration: Easy to use in web projects
- Variable font update: Modern version with weight axis
Technical Features
- Weight range: 200-900 (Variable font with wide range)
- Humanist design: Subtle curves within monospace constraints
- Clear differentiation: Distinct forms for similar characters
- Screen optimization: Designed for on-screen reading
- Web-friendly: Widely available and well-supported
Best Use Cases
Inconsolata excels in:
- Code editors: Classic choice for comfortable coding
- Web applications: Easy embedding via Google Fonts
- Documentation: Clean, readable code samples
- Cross-platform projects: Consistent appearance everywhere
Usage Tips
Inconsolata works best at medium sizes (12-16px for screens). Use weight 400 for regular code, 500-600 for emphasis. For newer features like ligatures, consider pairing with Fira Code or JetBrains Mono. Inconsolata's humanist character pairs well with similarly warm sans-serifs like Lato or Source Sans Pro.
Is Inconsolata on Google Fonts?
Yes, Inconsolata is available for free on Google Fonts. Get Inconsolata on Google Fonts ↗
Alternative For (2)
Inconsolata is a free alternative to the following premium fonts:
Designed specifically as a free Consolas alternative with similar proportions
Compare Inconsolata
See how Inconsolata compares to other fonts side by side.
Variable Font Axes
Inconsolata is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
| wdth | 50 | 100 | 200 |
Font Pairings
Fonts that pair well with Inconsolata based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Inconsolata in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Courier New to minimize layout shift when loading Inconsolata.
@font-face {
font-family: 'Inconsolata Fallback';
src: local('Courier New');
ascent-override: 85.9%;
descent-override: 19%;
line-gap-override: 0%;
size-adjust: 91.4%;
}How to Use Inconsolata
Copy these code snippets to quickly add Inconsolata to your project.
CSS code for Inconsolata
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@100..900&display=swap');HTML code for Inconsolata
<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=Inconsolata:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Inconsolata
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'inconsolata': ['Inconsolata', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-inconsolata">Your text here</p>Next.js code for Inconsolata
// Using next/font (Next.js 13+)
import { Inconsolata } from 'next/font/google';
const inconsolata = Inconsolata({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={inconsolata.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Inconsolata'" }}>Your text</p>Expo and React Native code for Inconsolata
// Install: npx expo install @expo-google-fonts/inconsolata expo-font
import { useFonts, Inconsolata_400Regular } from '@expo-google-fonts/inconsolata';
export default function App() {
const [fontsLoaded] = useFonts({
Inconsolata_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Inconsolata_400Regular' }}>
Your text here
</Text>
);
}