Install FontSwap
Google Sans Flex
About Google Sans Flex
- Source
- Google Fonts ↗
- Classification
- sans-serif
- 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 →Google Sans Flex is a variable sans-serif typeface designed by David Berlow of Font Bureau in collaboration with Google's Pathfinders team. An extension of the Google Sans family, Flex introduces six axes of variable font control — weight, width, optical size, grade, roundness, and slant — providing extensive typographic flexibility.
Design and Character
Google Sans Flex has a geometric foundation with rounded forms and consistent stroke weight that produce a friendly, approachable character. Its screen-first optimization prioritizes pixel-grid rendering, with a generous x-height and open apertures that maintain legibility at small sizes. The grade axis adjusts apparent weight without changing layout, useful for dark mode and accessibility. The roundness axis controls how geometric or humanist the letterforms appear.
Best For
- Digital product interfaces and design systems
- Mobile-first applications
- Consumer-facing technology products
- Multilingual digital products (Latin, Cyrillic, Greek)
- Brand systems requiring multi-axis variable font control
Technical Features
- Six variable axes: Weight (wght), width (wdth), optical size (opsz), grade (GRAD), roundness (ROND), and slant (slnt)
- Screen-first optimization: Proportions, curves, and spacing tuned for pixel grids and subpixel rendering
- Generous x-height: Improved legibility at small sizes for mobile interfaces
- Open apertures: Characters like c, e, s maintain clarity at small sizes
- Red Dot Design Award: Recognized for systematic multi-axis variable font design
Usage Tips
Use Regular weight for body text in product interfaces. The optical size axis automatically adjusts letterforms for different sizes. Use the grade axis for dark mode adjustments without layout shift. The roundness axis allows tuning between geometric and humanist character. Pair with JetBrains Mono for developer documentation or Source Serif Pro for editorial content.
Is Google Sans Flex on Google Fonts?
Yes, Google Sans Flex is available for free on Google Fonts. Get Google Sans Flex on Google Fonts ↗
Compare Google Sans Flex
See how Google Sans Flex compares to other fonts side by side.
Variable Font Axes
Google Sans Flex is a variable font with 6 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
| wdth | 75 | 100 | 125 |
| opsz | 8 | 14 | 144 |
| GRAD | -200 | 0 | 150 |
| ROND | 0 | 0 | 100 |
| slnt | -10 | 0 | 0 |
Font Pairings
Fonts that pair well with Google Sans Flex based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Google Sans Flex in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Google Sans Flex.
@font-face {
font-family: 'Google Sans Flex Fallback';
src: local('Arial');
ascent-override: 96.6%;
descent-override: 28.6%;
line-gap-override: 0%;
size-adjust: 98.35%;
}How to Use Google Sans Flex
Copy these code snippets to quickly add Google Sans Flex to your project.
CSS code for Google Sans Flex
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@100..900&display=swap');HTML code for Google Sans Flex
<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=Google+Sans+Flex:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Google Sans Flex
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'google-sans-flex': ['"Google Sans Flex"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-google-sans-flex">Your text here</p>Next.js code for Google Sans Flex
// Using next/font (Next.js 13+)
import { Google_Sans_Flex } from 'next/font/google';
const google_sans_flex = Google_Sans_Flex({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={google_sans_flex.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Google Sans Flex"' }}>Your text</p>Expo and React Native code for Google Sans Flex
// Install: npx expo install @expo-google-fonts/google-sans-flex expo-font
import { useFonts, Google_Sans_Flex_400Regular } from '@expo-google-fonts/google-sans-flex';
export default function App() {
const [fontsLoaded] = useFonts({
Google_Sans_Flex_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Google_Sans_Flex_400Regular' }}>
Your text here
</Text>
);
}