Fredoka + Nunito

playfulfriendly

Grumpy wizards make toxic brew

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.

Fredoka 600 / Nunito 400 — click the text to edit

Why it works

Both faces are rounded, so the trick here is contrast in structure rather than mood: Fredoka's puffy geometric semibold owns the headline while Nunito, a rounded sans actually engineered for paragraphs, carries the reading. Nunito's taller x-height and more conventional proportions keep body text brisk, and the shared soft terminals make the page feel like one voice instead of a costume. A natural fit for kids' products, snack brands and any checkout flow that wants to feel low-stakes.

More about each face: Fredoka · Nunito

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=Fredoka:wght@600&family=Nunito:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Fredoka', 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  font-weight: 600;
}

body {
  font-family: 'Nunito', Verdana, 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
}
Next.js — next/font
import { Fredoka, Nunito } from "next/font/google";

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

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

Related pairings