Install FontSwap
Plus Jakarta Sans
About Plus Jakarta Sans
- Source
- Google Fonts ↗
- Classification
- sans-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 →Plus Jakarta Sans is a geometric sans-serif typeface designed by Gumpita Rahayu from Tokotype. Released in 2020, it combines geometric precision with subtle humanist influences for a contemporary, versatile design.
Design Characteristics
Plus Jakarta Sans features clean geometric forms with slightly softened corners and subtle ink traps. The design balances technical precision with warmth, making it suitable for both UI applications and brand identity work.
Technical Features
- Variable font: Weight axis from ExtraLight (200) to ExtraBold (800)
- Comprehensive character set: Extended Latin and Vietnamese support
- True italics: Distinct italic designs for each weight
- OpenType features: Stylistic alternates and contextual forms
Best Use Cases
Plus Jakarta Sans excels in:
- User interfaces: Clean, readable UI typography
- Tech branding: Modern startup and SaaS identities
- Web applications: Excellent screen rendering
- Corporate communications: Professional yet approachable materials
Is Plus Jakarta Sans on Google Fonts?
Yes, Plus Jakarta Sans is available for free on Google Fonts. Get Plus Jakarta Sans on Google Fonts ↗
Alternative For (2)
Plus Jakarta Sans is a free alternative to the following premium fonts:
Contemporary geometric sans with variable axes and polished detailing
Compare Plus Jakarta Sans
See how Plus Jakarta Sans compares to other fonts side by side.
Variable Font Axes
Plus Jakarta Sans is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 800 |
Font Pairings
Fonts that pair well with Plus Jakarta Sans based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Plus Jakarta Sans in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Plus Jakarta Sans.
@font-face {
font-family: 'Plus Jakarta Sans Fallback';
src: local('Arial');
ascent-override: 103.8%;
descent-override: 22.2%;
line-gap-override: 0%;
size-adjust: 103.36%;
}How to Use Plus Jakarta Sans
Copy these code snippets to quickly add Plus Jakarta Sans to your project.
CSS code for Plus Jakarta Sans
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100..900&display=swap');HTML code for Plus Jakarta Sans
<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=Plus+Jakarta+Sans:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Plus Jakarta Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'plus-jakarta-sans': ['"Plus Jakarta Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-plus-jakarta-sans">Your text here</p>Next.js code for Plus Jakarta Sans
// Using next/font (Next.js 13+)
import { Plus_Jakarta_Sans } from 'next/font/google';
const plus_jakarta_sans = Plus_Jakarta_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={plus_jakarta_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Plus Jakarta Sans"' }}>Your text</p>Expo and React Native code for Plus Jakarta Sans
// Install: npx expo install @expo-google-fonts/plus-jakarta-sans expo-font
import { useFonts, Plus_Jakarta_Sans_400Regular } from '@expo-google-fonts/plus-jakarta-sans';
export default function App() {
const [fontsLoaded] = useFonts({
Plus_Jakarta_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Plus_Jakarta_Sans_400Regular' }}>
Your text here
</Text>
);
}