NodlumeNodlume
Font pairing generator

Lora font pairings

Lora is a contemporary text serif with calligraphic roots — brushed curves meet sturdy drafting, tuned for screens. It carries long-form reading beautifully, which has made it a staple of editorial sites and blogs.

Lora pairs in both directions. As a body face it grounds a modern sans heading with literary warmth; as a heading it lends authority over a clean sans body. Either way the serif/sans contrast does the structural work, so the two faces never blur together.

In the Nodlume catalog, Lora leads the heading in 2 of these 4 pairings and the body in 2 — its partners are Open Sans, Oswald, Pacifico and Source Serif 4. Every combination below previews in the real faces, with the full fallback-safe CSS font stacks and a Tailwind v4 @theme snippet you can paste as-is.

Modern Magazine

Editorial & publishing

Lora as body — A punchy, condensed headline font offset by an elegant serif body.

Voyage beyond the quiet harbor

Body copy sets the tone for long reading — Lora carries paragraphs while the heading takes the stage.

Heading
Oswald, 'Arial Narrow', sans-serif
Body
Lora, Georgia, serif
Mono
ui-monospace, SFMono-Regular, monospace
Tailwind v4 snippet
@import "tailwindcss";

@theme {
  --font-heading: Oswald, 'Arial Narrow', sans-serif;
  --font-body: Lora, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Oswald:wght@400;600;700&display=swap">

Quiet Essay

Editorial & publishing

Lora as heading — A double-serif pairing that feels inherently literary and poetic.

Voyage beyond the quiet harbor

Body copy sets the tone for long reading — Source Serif 4 carries paragraphs while the heading takes the stage.

Heading
Lora, Georgia, serif
Body
'Source Serif 4', Georgia, serif
Mono
ui-monospace, SFMono-Regular, monospace
Tailwind v4 snippet
@import "tailwindcss";

@theme {
  --font-heading: Lora, Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Source+Serif+4:wght@400;600;700&display=swap">

Lora & Open Sans

Editorial & publishing

Lora as heading — A warm serif voice over a friendly, ubiquitous sans body.

Voyage beyond the quiet harbor

Body copy sets the tone for long reading — Open Sans carries paragraphs while the heading takes the stage.

Heading
Lora, Georgia, serif
Body
'Open Sans', 'Segoe UI', sans-serif
Mono
'Fira Code', Consolas, monospace
Tailwind v4 snippet
@import "tailwindcss";

@theme {
  --font-heading: Lora, Georgia, serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', Consolas, monospace;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600;700&family=Lora:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap">

Bakery Menu

Events & hospitality

Lora as body — A casual, fun brush script for categories or specials, matched with a readable, slightly rustic serif.

Voyage beyond the quiet harbor

Body copy sets the tone for long reading — Lora carries paragraphs while the heading takes the stage.

Heading
Pacifico, cursive
Body
Lora, Georgia, serif
Mono
ui-monospace, SFMono-Regular, monospace
Tailwind v4 snippet
@import "tailwindcss";

@theme {
  --font-heading: Pacifico, cursive;
  --font-body: Lora, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Pacifico:wght@400;600;700&display=swap">

Using Lora in Tailwind CSS v4

Tailwind v4 reads fonts from @theme tokens, so a pairing is three lines of CSS: declare --font-heading, --font-body and --font-mono and Tailwind exposes them as the font-heading, font-body and font-mono utilities. Each card above carries that snippet plus the Google Fonts link for the families it needs. The theme generator writes the same tokens into a complete stylesheet with colors, radius and a modular type scale.

What fonts go well with Lora?
In the Nodlume catalog Lora appears in 4 curated pairings, combined with Open Sans, Oswald, Pacifico and Source Serif 4. The rule behind every one of them is contrast with harmony: the partner differs in classification (a serif over a sans, a geometric over a grotesque) while matching Lora's x-height and width closely enough that the two read as one system. Each card above shows the combination in the real faces so you can judge the fit before copying it.
How do I use Lora in Tailwind CSS v4?
Load the family with the Google Fonts link shown on the pairing card, then declare it in your stylesheet's @theme block as --font-heading, --font-body, or --font-mono. Tailwind v4 turns each token into a utility — font-heading, font-body, font-mono — so the pairing is one CSS edit rather than a per-component change. The theme generator emits the same three tokens inside a complete globals.css with colors, radius, and a type scale.

Try these pairings live

The font pairing generator has all 100 curated combinations — filter by use case, shuffle a random heading/body/mono mix with per-slot locks, and copy the CSS custom properties. For the rules behind pairings like these, read the font pairing guide, or set the type rhythm with the type scale calculator.

Open the generator

More font pairings

We'd like to use Google cookies to understand how Nodlume is used and to measure our advertising. Nothing loads until you choose, and declining does not affect anything in the app.