Install FontSwap
Poppins
About Poppins
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- Features
- 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 →Poppins is a geometric sans-serif typeface designed by Indian Type Foundry and released through Google Fonts. It supports both Latin and Devanagari scripts, making it one of the few geometric fonts with strong multilingual capabilities.
History and Design
Poppins was designed by Indian Type Foundry's Jonny Pinhorn with Ninad Kale handling the Devanagari script. The design follows the geometric sans-serif tradition with nearly monolinear letterforms based on circular shapes. What sets Poppins apart is its attention to optical balance—while appearing purely geometric, subtle adjustments ensure excellent readability at all sizes.
The font launched in 2014 and quickly gained popularity due to its versatility and inclusion in Google Fonts.
Why Poppins is Popular
Poppins has become one of the most-used fonts on the web, particularly for UI design and branding. Its geometric precision communicates modernity and professionalism, while its slightly rounded terminals add warmth. The comprehensive weight range from Thin (100) to Black (900) with matching italics makes it suitable for virtually any typographic need.
Technical Features
- 9 weights: Complete range from Thin to Black
- True italics: Carefully designed for all weights
- Devanagari support: One of few geometric fonts supporting Indian scripts
- OpenType features: Tabular figures, fractions, and stylistic alternates
- Optimized hinting: Crisp rendering on Windows and low-resolution screens
Best Use Cases
Poppins excels in:
- Web applications: Modern, clean interface typography
- Brand identity: Geometric precision for logos and marketing
- Multilingual projects: Latin and Devanagari in one family
- Display typography: Strong presence at large sizes
Usage Tips
For body text, use weights 400-500 at 16px or larger for optimal readability. The heavier weights (600-900) work brilliantly for headlines and display use. Poppins pairs beautifully with serif fonts like Lora or Merriweather, creating classic contrast between geometric modernity and traditional elegance.
Is Poppins on Google Fonts?
Yes, Poppins is available for free on Google Fonts. Get Poppins on Google Fonts ↗
Alternative For (37)
Poppins is a free alternative to the following premium fonts:
Excellent match with similar geometric shapes and friendly character
Shares geometric foundations with similar weight distribution
Similar geometric forms with comprehensive weight range
Similar geometric foundation with slightly softer appearance
Very similar geometric proportions with rounded terminals
Rounded geometric forms with comparable modernist aesthetic
Clean geometric sans with similar circular letter construction
Comparable geometric foundations with slightly rounder forms
Nearly identical geometric proportions with soft rounded forms
Geometric sans with friendly character and broad weight range
Compare Poppins
See how Poppins compares to other fonts side by side.
Font Pairings
Fonts that pair well with Poppins based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Poppins in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Poppins.
@font-face {
font-family: 'Poppins Fallback';
src: local('Arial');
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
size-adjust: 105.68%;
}How to Use Poppins
Copy these code snippets to quickly add Poppins to your project.
CSS code for Poppins
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');HTML code for Poppins
<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=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">Tailwind code for Poppins
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'poppins': ['Poppins', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-poppins">Your text here</p>Next.js code for Poppins
// Using next/font (Next.js 13+)
import { Poppins } from 'next/font/google';
const poppins = Poppins({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={poppins.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Poppins'" }}>Your text</p>Expo and React Native code for Poppins
// Install: npx expo install @expo-google-fonts/poppins expo-font
import { useFonts, Poppins_400Regular } from '@expo-google-fonts/poppins';
export default function App() {
const [fontsLoaded] = useFonts({
Poppins_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Poppins_400Regular' }}>
Your text here
</Text>
);
}