Install FontSwap
Google Sans Code
About Google Sans Code
- Source
- Google Fonts ↗
- Classification
- mono
- 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 Code is a fixed-width companion to Google's brand fonts, developed by Google with Universal Thirst and dedicated to the memory of Chris Simpkins. Instead of adapting a generic programming font, the team derived it from Google's existing brand typefaces and tuned it for the sizes code is usually read at.
Two design decisions stand out. First, the roman maximises counter space with gradual curves and straight vertical stem segments, and characters that are easy to confuse, such as "a", "g" and "Q", borrow features from text typefaces so they stay distinct. Second, the italic is deliberately different. Inspired by Ludovico Vicentino degli Arrighi's early Italian italics, it is more dynamic and contrasting than the roman, which suits the common habit of setting code comments in italic.
On Google Fonts it is a variable font with a weight axis from Light (300) to ExtraBold (800), with italics. Human-language coverage centres on Latin, Latin Extended and Vietnamese, and the character set extends to box-drawing characters and geometric symbols that terminals and text-based UIs rely on.
Use it in editors, documentation code samples and data-heavy tables. Google Sans Code is free under the SIL Open Font License 1.1.
Is Google Sans Code on Google Fonts?
Yes, Google Sans Code is available for free on Google Fonts. Get Google Sans Code on Google Fonts ↗
Compare Google Sans Code
See how Google Sans Code compares to other fonts side by side.
Variable Font Axes
Google Sans Code is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 300 | 400 | 800 |
How to Use Google Sans Code
Copy these code snippets to quickly add Google Sans Code to your project.
CSS code for Google Sans Code
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@100..900&display=swap');HTML code for Google Sans Code
<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+Code:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Google Sans Code
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'google-sans-code': ['"Google Sans Code"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-google-sans-code">Your text here</p>Next.js code for Google Sans Code
// Using next/font (Next.js 13+)
import { Google_Sans_Code } from 'next/font/google';
const google_sans_code = Google_Sans_Code({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={google_sans_code.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Google Sans Code"' }}>Your text</p>Expo and React Native code for Google Sans Code
// Install: npx expo install @expo-google-fonts/google-sans-code expo-font
import { useFonts, Google_Sans_Code_400Regular } from '@expo-google-fonts/google-sans-code';
export default function App() {
const [fontsLoaded] = useFonts({
Google_Sans_Code_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Google_Sans_Code_400Regular' }}>
Your text here
</Text>
);
}