Install FontSwap
Jost
About Jost
- 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 →Jost is an original geometric sans-serif typeface designed by Owen Earl, inspired by the 1920s German typographic tradition. Named after Heinrich Jost, a German typeface designer, it captures the essence of geometric sans-serif fonts like Futura while offering modern refinements and open-source availability.
History and Design
Owen Earl designed Jost as a tribute to the geometric sans-serif genre that emerged from the Bauhaus movement. While drawing clear inspiration from Paul Renner's Futura, Jost incorporates contemporary adjustments that improve its performance in digital environments. The typeface maintains the characteristic circular forms and even stroke widths that define geometric sans-serifs.
Why Jost is Popular
Jost stands out as the most faithful free alternative to Futura available. Its geometric precision and elegant proportions make it suitable for the same sophisticated applications where Futura excels. The inclusion of a variable font version and comprehensive character set addresses modern design requirements while honoring its historical influences.
Technical Features
- Variable font: Full weight range from Thin (100) to Black (900)
- True italics: Carefully designed oblique variants for all weights
- Cyrillic support: Extended character set for international projects
- OpenType features: Stylistic alternates, tabular figures, and contextual forms
- Historical alternates: Optional letterforms that echo original geometric designs
Best Use Cases
Jost excels in:
- Fashion and luxury branding: Elegant geometric aesthetic
- Display typography: Strong visual presence at large sizes
- Editorial design: Sophisticated headlines and pull quotes
- Art and culture projects: Connection to modernist design heritage
Usage Tips
For display use, lighter weights (100-300) create elegant, refined headlines. Medium weights (400-500) work well for subheadings and navigation. For body text at smaller sizes, increase tracking slightly to improve readability. Pair Jost with humanist serifs like Libre Baskerville for classic contrast, or with other geometric fonts for a cohesive modernist look.
Is Jost on Google Fonts?
Yes, Jost is available for free on Google Fonts. Get Jost on Google Fonts ↗
Alternative For (5)
Jost is a free alternative to the following premium fonts:
Similar geometric sans-serif proportions rooted in 1920s design tradition
Closest free alternative with authentic geometric proportions
Compare Jost
See how Jost compares to other fonts side by side.
Variable Font Axes
Jost is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
Font Pairings
Fonts that pair well with Jost based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Jost in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Jost.
@font-face {
font-family: 'Jost Fallback';
src: local('Arial');
ascent-override: 107%;
descent-override: 37.5%;
line-gap-override: 0%;
size-adjust: 88.71%;
}How to Use Jost
Copy these code snippets to quickly add Jost to your project.
CSS code for Jost
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&display=swap');HTML code for Jost
<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=Jost:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Jost
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'jost': ['Jost', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-jost">Your text here</p>Next.js code for Jost
// Using next/font (Next.js 13+)
import { Jost } from 'next/font/google';
const jost = Jost({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={jost.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Jost'" }}>Your text</p>Expo and React Native code for Jost
// Install: npx expo install @expo-google-fonts/jost expo-font
import { useFonts, Jost_400Regular } from '@expo-google-fonts/jost';
export default function App() {
const [fontsLoaded] = useFonts({
Jost_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Jost_400Regular' }}>
Your text here
</Text>
);
}