Install FontSwap
Google Sans
About Google 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 →Google Sans is the current generation of Google's brand typeface, now free on Google Fonts under the SIL Open Font License 1.1. It folds what used to be two static families, Google Sans and Google Sans Text, into one variable design.
Three axes do the work:
- Weight (wght) runs continuously from Regular (400) to Bold (700), so in-between values such as SemiBold 600 are available.
- Optical size (opsz) spans 17 to 18 and behaves like a switch: 17 and below gives the former Text design for small sizes, 18 and above gives the display design.
- Grade (GRAD), from −50 to 200, makes letters render lighter or darker without changing their width, so text doesn't reflow. The Google Fonts documentation suggests it for balancing light text on dark themes.
Italics live in a separate variable file with the same axes.
The other standout is language coverage. Beyond Latin, Vietnamese, Greek and Cyrillic, the Google Fonts metadata lists Armenian, Georgian, Hebrew, Devanagari, Bengali, Tamil, Thai, Khmer and many other scripts. For multilingual products that want a warm geometric sans, that breadth is rare among free fonts.
The trade-off is recognisability: it is Google's own brand face, and it carries that association.
Is Google Sans on Google Fonts?
Yes, Google Sans is available for free on Google Fonts. Get Google Sans on Google Fonts ↗
Compare Google Sans
See how Google Sans compares to other fonts side by side.
Variable Font Axes
Google Sans is a variable font with 3 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 700 |
| opsz | 17 | 17 | 18 |
| GRAD | -50 | 0 | 200 |
How to Use Google Sans
Copy these code snippets to quickly add Google Sans to your project.
CSS code for Google Sans
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@100..900&display=swap');HTML code for Google 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=Google+Sans:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Google Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'google-sans': ['"Google Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-google-sans">Your text here</p>Next.js code for Google Sans
// Using next/font (Next.js 13+)
import { Google_Sans } from 'next/font/google';
const google_sans = Google_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={google_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Google Sans"' }}>Your text</p>Expo and React Native code for Google Sans
// Install: npx expo install @expo-google-fonts/google-sans expo-font
import { useFonts, Google_Sans_400Regular } from '@expo-google-fonts/google-sans';
export default function App() {
const [fontsLoaded] = useFonts({
Google_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Google_Sans_400Regular' }}>
Your text here
</Text>
);
}