Install FontSwap
Fraunces
About Fraunces
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- Variable (100-900)
- Features
- Variable, Italics
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →Fraunces is a display serif typeface designed by Undercase Type (Phaedra Charles and Flavia Zimbardi) with engineering support from Google Fonts. Released in 2020, Fraunces offers a soft, friendly character with quirky details that make it an excellent modern alternative to vintage display serifs like Cooper Black.
History and Design
Undercase Type designed Fraunces as a "wonky" soft serif inspired by early 20th-century display typefaces. The design embraces imperfection—letterforms feature deliberately irregular details that give text a warm, handcrafted quality without sacrificing contemporary refinement.
Fraunces employs two variable font axes: weight (from Thin to Black) and "WONK" (controlling the quirkiness of letterforms). This optical size axis lets designers dial in exactly how much personality they want, from refined to playfully irregular.
Technical Features
- Variable font: Full weight range (100-900) plus optical axis
- Optical sizing: WONK axis for personality control
- Complete styles: Regular and Italic for all weights
- Modern optimization: Excellent screen rendering
- Extended Latin: Comprehensive character coverage
Why Fraunces Excels
Fraunces succeeds by offering controlled quirkiness. Unlike typefaces that commit fully to irregularity, Fraunces lets designers tune the personality level. At low WONK settings, it's a sophisticated soft serif; at high settings, it's playfully distinctive. This flexibility makes it suitable for diverse applications.
Best Use Cases
Fraunces excels in:
- Brand identity: Friendly, approachable marks
- Editorial headlines: Warm, engaging titles
- Packaging design: Premium with personality
- Web display: Variable font performance
Usage Tips
Use the WONK axis thoughtfully—higher values suit display sizes and playful contexts, while lower values work better for text sizes and formal applications. The weight range allows for dramatic headline treatments while maintaining legibility. Pair with clean sans-serifs like Inter or Open Sans for effective contrast.
Is Fraunces on Google Fonts?
Yes, Fraunces is available for free on Google Fonts. Get Fraunces on Google Fonts ↗
Alternative For (3)
Fraunces is a free alternative to the following premium fonts:
Modern variable display serif with optical sizes and soft, friendly character
Compare Fraunces
See how Fraunces compares to other fonts side by side.
Variable Font Axes
Fraunces is a variable font with 4 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
| opsz | 9 | 14 | 144 |
| SOFT | 0 | 0 | 100 |
| WONK | 0 | 1 | 1 |
Font Pairings
Fonts that pair well with Fraunces based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Fraunces in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Fraunces.
@font-face {
font-family: 'Fraunces Fallback';
src: local('Arial');
ascent-override: 97.8%;
descent-override: 25.5%;
line-gap-override: 0%;
size-adjust: 92.95%;
}How to Use Fraunces
Copy these code snippets to quickly add Fraunces to your project.
CSS code for Fraunces
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100..900&display=swap');HTML code for Fraunces
<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=Fraunces:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Fraunces
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'fraunces': ['Fraunces', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-fraunces">Your text here</p>Next.js code for Fraunces
// Using next/font (Next.js 13+)
import { Fraunces } from 'next/font/google';
const fraunces = Fraunces({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={fraunces.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Fraunces'" }}>Your text</p>Expo and React Native code for Fraunces
// Install: npx expo install @expo-google-fonts/fraunces expo-font
import { useFonts, Fraunces_400Regular } from '@expo-google-fonts/fraunces';
export default function App() {
const [fontsLoaded] = useFonts({
Fraunces_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Fraunces_400Regular' }}>
Your text here
</Text>
);
}