Install FontSwap
Josefin Slab
About Josefin Slab
- Source
- Google Fonts ↗
- Classification
- serif
- 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 →Josefin Slab is an elegant geometric slab serif typeface designed by Santiago Orozco. Inspired by 1930s typeface designs, it combines vintage charm with clean modern construction, offering a distinctive alternative to contemporary geometric slabs like Museo Slab.
History and Design
Santiago Orozco designed Josefin Slab as part of the Josefin family, which also includes Josefin Sans. The design draws inspiration from the geometric experimentation of the 1920s and 1930s—particularly Swedish designs of that era—while maintaining functionality for contemporary use.
The typeface features elegant proportions with a relatively high x-height and slightly condensed letterforms. Its geometric construction creates clean lines, while subtle curves and quirky details (like the distinctive lowercase 'g') add personality and warmth.
Why Josefin Slab Excels
Josefin Slab occupies a unique space between vintage and modern. Its 1930s-inspired character provides distinctive personality without feeling dated, making it suitable for brands and projects wanting classic elegance with contemporary functionality.
Technical Features
- Variable font: Continuous weight axis for precise control
- Seven static weights: Thin through Bold
- True italics: Distinct italic designs
- Vintage-modern aesthetic: Distinctive character
- Extended Latin: Good character coverage
Best Use Cases
Josefin Slab excels in:
- Fashion and lifestyle: Elegant, distinctive branding
- Editorial design: Magazine headlines and feature typography
- Wedding and events: Sophisticated invitations and materials
- Vintage-inspired projects: Period authenticity with modern function
Usage Tips
Josefin Slab's distinctive character shines at display sizes (20px+) where its elegant proportions are visible. Lighter weights (100-300) create delicate, refined headlines; Regular (400) works for short text passages. Pair with Josefin Sans for cohesive typography, or complement with clean sans-serifs like Open Sans or Lato. The variable font version enables precise weight fine-tuning for optimal visual hierarchy.
Is Josefin Slab on Google Fonts?
Yes, Josefin Slab is available for free on Google Fonts. Get Josefin Slab on Google Fonts ↗
Alternative For (1)
Josefin Slab is a free alternative to the following premium fonts:
Elegant geometric slab with vintage character and clean modern feel
Compare Josefin Slab
See how Josefin Slab compares to other fonts side by side.
Variable Font Axes
Josefin Slab is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 700 |
Font Pairings
Fonts that pair well with Josefin Slab based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Josefin Slab in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Josefin Slab.
@font-face {
font-family: 'Josefin Slab Fallback';
src: local('Georgia');
ascent-override: 75%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 77.89%;
}How to Use Josefin Slab
Copy these code snippets to quickly add Josefin Slab to your project.
CSS code for Josefin Slab
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100..900&display=swap');HTML code for Josefin Slab
<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+Slab:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Josefin Slab
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'josefin-slab': ['"Josefin Slab"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-josefin-slab">Your text here</p>Next.js code for Josefin Slab
// Using next/font (Next.js 13+)
import { Josefin_Slab } from 'next/font/google';
const josefin_slab = Josefin_Slab({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={josefin_slab.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Josefin Slab"' }}>Your text</p>Expo and React Native code for Josefin Slab
// Install: npx expo install @expo-google-fonts/josefin-slab expo-font
import { useFonts, Josefin_Slab_400Regular } from '@expo-google-fonts/josefin-slab';
export default function App() {
const [fontsLoaded] = useFonts({
Josefin_Slab_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Josefin_Slab_400Regular' }}>
Your text here
</Text>
);
}