Figtree + Lora

friendlywarmmodern

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 — Figtree over Lora, in the wild.

Figtree 700 / Lora 400 — click any section and type your own copy.

Why it works

Figtree's tall x-height and calm geometry make bold headings that feel current without shouting, and Lora's brushed, moderate-contrast serifs settle body text into an easy reading rhythm. The two share generous proportions, so the transition from heading to paragraph feels continuous rather than jarring. It is a gentle modern-over-classic combination suited to blogs and small-business sites that want warmth with a clean edge.

More about each face: Figtree · Lora

Use this pairing

HTML — Google Fonts embed
<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=Figtree:wght@700&family=Lora:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Figtree', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
Next.js — next/font
import { Figtree, Lora } from "next/font/google";

const heading = Figtree({
  subsets: ["latin"],
  weight: "700",
  variable: "--font-heading",
});

const body = Lora({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});
From usKeychord— keyboard shortcuts for every app

Related pairings