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.
- Score
- 67 /100 Good
- File Size
- 151.7 KB Medium
- Weights
- 9 (variable)
- Languages
- 3 groups CDN delivery
Font Metrics
- x-Height Ratio
- 0.457
- Cap Height Ratio
- 0.623
- Ascender
- 859
- Descender
- -190
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>
);
}