Install FontSwap
Oswald
About Oswald
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- Variable (100-900)
- Features
- Variable
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 →Oswald is a condensed sans-serif typeface designed by Vernon Adams and later extended by Kalapi Gajjar and Alexei Vanyashin. Originally released in 2011 for Google Fonts, Oswald reworks the classic gothic and grotesque style with modern proportions and excellent screen optimization.
History and Design
Vernon Adams designed Oswald as an homage to 19th-century American gothic typefaces—the condensed sans-serifs that dominated newspaper headlines and advertising. The name references the era when condensed grotesques like these were workhorses of commercial typography.
Unlike its historical predecessors, Oswald was designed specifically for digital screens. Adams carefully balanced traditional condensed proportions with modern optimization, creating a typeface that honors its heritage while performing excellently on contemporary displays.
Technical Features
- Variable font: Continuous weight axis from ExtraLight to Bold
- Six weights: Comprehensive range for versatile typography
- Cyrillic support: Extended language coverage
- Screen optimized: Excellent rendering at all sizes
- Modern curves: Refined details for digital display
Why Oswald Excels
Oswald succeeds by offering professional-grade condensed typography with exceptional flexibility. Its six weights enable nuanced typographic hierarchy, while the variable font version provides infinite gradations between them. The design maintains legibility even at the lightest weights, unusual for condensed faces.
Best Use Cases
Oswald excels in:
- Website headers: Bold, space-efficient navigation
- Editorial design: Magazine and newspaper headlines
- Data visualization: Labels and titles in limited space
- Video production: Title cards and lower thirds
Usage Tips
Oswald works across a wider size range than most condensed faces due to its refined design. Lighter weights (200-300) suit secondary text and captions. Medium weights (400-500) balance presence with readability. Bold weights (600-700) command attention for primary headlines. The variable font enables precise weight matching to design requirements. Pair with versatile body fonts like Roboto, Source Sans Pro, or Merriweather for effective contrast.
Is Oswald on Google Fonts?
Yes, Oswald is available for free on Google Fonts. Get Oswald on Google Fonts ↗
Alternative For (18)
Oswald is a free alternative to the following premium fonts:
Modern condensed sans-serif with multiple weight options
Versatile condensed sans-serif with multiple weights and variable font support
Modern condensed sans-serif with multiple weights and variable font option
Condensed neo-grotesque with variable weight support and Cyrillic
Bold condensed display sans for advertising and headlines
Compare Oswald
See how Oswald compares to other fonts side by side.
Variable Font Axes
Oswald is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 700 |
Font Pairings
Fonts that pair well with Oswald based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Oswald in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Oswald.
@font-face {
font-family: 'Oswald Fallback';
src: local('Arial');
ascent-override: 119.3%;
descent-override: 28.9%;
line-gap-override: 0%;
size-adjust: 111.46%;
}How to Use Oswald
Copy these code snippets to quickly add Oswald to your project.
CSS code for Oswald
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@100..900&display=swap');HTML code for Oswald
<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=Oswald:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Oswald
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'oswald': ['Oswald', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-oswald">Your text here</p>Next.js code for Oswald
// Using next/font (Next.js 13+)
import { Oswald } from 'next/font/google';
const oswald = Oswald({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={oswald.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Oswald'" }}>Your text</p>Expo and React Native code for Oswald
// Install: npx expo install @expo-google-fonts/oswald expo-font
import { useFonts, Oswald_400Regular } from '@expo-google-fonts/oswald';
export default function App() {
const [fontsLoaded] = useFonts({
Oswald_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Oswald_400Regular' }}>
Your text here
</Text>
);
}