Josefin Sans + Lora
Grumpy wizards make toxic brew
A standfirst set in Lora, one size up — where a pairing starts earning trust.
The five boxing wizards jump quickly over the lazy dog, mixing jugs of quiet vodka while the jury watches. Click anywhere in this preview and type your own text to try the pairing.
“Type is a beautiful group of letters, not a group of beautiful letters.”
— Matthew Carter
Fig. 1 — Josefin Sans over Lora, in the wild.
Josefin Sans 600 / Lora 400 — click any section and type your own copy.
Why it works
Josefin Sans has a 1920s geometric elegance — tiny x-height, long ascenders, art-deco proportions — that gives headings a vintage poster quality, while Lora's moderate-contrast serifs handle the sustained reading Josefin was never built for. The contrast in x-height is the key move: airy, vertical headlines floating over a dense, comfortable text block. It photographs beautifully on wedding sites and works equally well for boutique portfolios.
More about each face: Josefin Sans · Lora
Use this pairing
<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=Josefin+Sans:wght@600&family=Lora:wght@400;600&display=swap" rel="stylesheet">h1, h2, h3 {
font-family: 'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif;
font-weight: 600;
}
body {
font-family: 'Lora', Georgia, 'Times New Roman', serif;
font-weight: 400;
}import { Josefin_Sans, Lora } from "next/font/google";
const heading = Josefin_Sans({
subsets: ["latin"],
weight: "600",
variable: "--font-heading",
});
const body = Lora({
subsets: ["latin"],
weight: "400",
variable: "--font-body",
});