Fontlog
All typefaces

Crimson Text

by Sebastian Kosch · 2010 · 3 weights

Sebastian Kosch's old-style book serif, drawn for long-form reading — warm, classical, and comfortable at paragraph sizes.

Preview

Pair it with another font →

Crimson Text is an old-style serif in the Garalde tradition — Sebastian Kosch started it as a book face, following the ideals of designers like Jan Tschichold, and it still reads best when you give it a column of running text. The colour on the page is even, the x-height is generous, and at 400 it holds up over long passages without getting tiring.

It only ships three weights (400, 600, 700) with matching italics, and it isn’t variable, so if you need light weights or fine display control, look at Crimson Pro instead. The default spacing also runs a touch tight at small sizes — nudge letter-spacing up a hair for body copy and it settles down.

Best for

Where Crimson Text earns its place — and why. My opinion, not a rule.

Get it

Pick the one that fits your setup. Self-hosting is best for production; the CDN link is quickest to try.

npm (Fontsource) bash 
pnpm add @fontsource/crimson-text
# npm install @fontsource/crimson-text
# yarn add @fontsource/crimson-text
Import & use ts 
import '@fontsource/crimson-text';

/* then, in your CSS */
font-family: 'Crimson Text', serif;
next/font tsx 
import { Crimson_Text } from 'next/font/google';

const crimsonText = Crimson_Text({
  subsets: ['latin'],
  display: 'swap',
  weight: ['400'],
});

// <body className={crimsonText.className}>

Self-hosted and optimised at build time — no network request to Google.

Google Fonts (CDN) html 
<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=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
  rel="stylesheet"
/>

/* CSS */
font-family: 'Crimson Text', serif;

Quickest to paste in, but adds a third-party request. Prefer self-hosting for production.

Self-host css 
/* Download the OFL-1.1 files from the source below, then: */
@font-face {
  font-family: 'Crimson Text';
  src: url('/fonts/crimson-text.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Files: https://github.com/skosch/Crimson

AI / agent prompt prompt 
Add the "Crimson Text" font to this project.

- CSS family name once loaded: 'Crimson Text'
- Fallback stack: serif
- Static weights: 400, 600, 700
- Fontsource package (self-hosted, npm): @fontsource/crimson-text
- next/font/google export name: Crimson_Text
- Google Fonts CDN family param: Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700
- 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/skosch/Crimson

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.

If you like this, try

  • Crimson Pro

Pairs well with