Inconsolata
by Raph Levien · 2006 · variable
Raph Levien's humanist monospace — one of the original "nice" coding fonts, now variable with weight and width axes.
Preview
Pair it with another font →Inconsolata has been a go-to coding font since 2006, drawn by Raph Levien as a tribute to Consolas with a more humanist, less mechanical feel — open counters, a bit of warmth in the curves. The version 3 rewrite made it variable and added a width axis, so you can condense it for dense tables or expand it for headers.
It reads better in editors and code blocks than in long prose (few monospaces don’t). The
lowercase l and 1 are distinct, but the zero is slashed rather than dotted, which some people
dislike — check it against your usual squint test before committing.
Best for
Where Inconsolata earns its place — and why. My opinion, not a rule.
- Code
The reason it exists: a humanist monospace that stays readable in an editor for hours.
- Developer tools
A sane default for the snippet, CLI and config blocks on a developer-facing site.
- Documentation
Pairs quietly with almost any text face when you only need mono for the code samples.
Get it
Pick the one that fits your setup. Self-hosting is best for production; the CDN link is quickest to try.
pnpm add @fontsource-variable/inconsolata
# npm install @fontsource-variable/inconsolata
# yarn add @fontsource-variable/inconsolataimport '@fontsource-variable/inconsolata';
/* then, in your CSS */
font-family: 'Inconsolata Variable', monospace;Fontsource appends “Variable” to the family name for variable fonts — use “Inconsolata Variable”, not “Inconsolata”.
import { Inconsolata } from 'next/font/google';
const inconsolata = Inconsolata({
subsets: ['latin'],
display: 'swap',
axes: [],
});
// <body className={inconsolata.className}>Self-hosted and optimised at build time — no network request to Google.
<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:wdth,wght@50..200,200..900&display=swap"
rel="stylesheet"
/>
/* CSS */
font-family: 'Inconsolata', monospace;Quickest to paste in, but adds a third-party request. Prefer self-hosting for production.
/* Download the OFL-1.1 files from the source below, then: */
@font-face {
font-family: 'Inconsolata';
src: url('/fonts/inconsolata.woff2') format('woff2');
font-weight: 200 900;
font-display: swap;
}Files: https://github.com/googlefonts/Inconsolata
Add the "Inconsolata" font to this project.
- CSS family name once loaded: 'Inconsolata Variable'
- Fallback stack: monospace
- Variable font. Axes: wght 200–900, wdth 50–200
- Fontsource package (self-hosted, npm): @fontsource-variable/inconsolata
- next/font/google export name: Inconsolata
- Google Fonts CDN family param: Inconsolata:wdth,wght@50..200,200..900
- License: OFL-1.1 — Free for commercial use — self-host, bundle, and modify freely; you just can't sell the font files by themselves.
- Source: https://github.com/googlefonts/Inconsolata
Detect how this project already loads fonts (Fontsource import, next/font, Tailwind @theme, plain @font-face) and follow that pattern. Prefer self-hosting over the Google Fonts CDN link for production.Paste into Claude Code, Codex, T3 Code, Cursor or similar — it has what an agent needs to wire the font up itself.