Install FontSwap
Cascadia Code
About Cascadia 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 →Cascadia Code began inside Microsoft's Windows Terminal project as a replacement for Consolas. The goal was to give monospace environments some personality, especially in the italic, while staying legible on lower-resolution screens at small sizes. Google Fonts credits the design to Aaron Bell, Mohamad Dakak, Viktoriya Grabowska and Liron Lavi Turkenich.
"Code" in the name signals programming ligatures. If you would rather see exactly one glyph per character cell, the project also publishes Cascadia Mono, the same design with those ligatures turned off.
The Google Fonts release is a variable font with a weight axis from ExtraLight (200) to Bold (700), plus italics. Script coverage is unusually broad for a coding font: Latin, Latin Extended and Vietnamese, Greek, Cyrillic, Arabic and Hebrew.
Good homes for it:
- Terminal and editor themes
- Code blocks in documentation and technical blogs
- Developer-tool marketing, where a monospace with some warmth helps
Cascadia Code is open source, maintained by Microsoft on GitHub, and free on Google Fonts under the SIL Open Font License 1.1.
Is Cascadia Code on Google Fonts?
Yes, Cascadia Code is available for free on Google Fonts. Get Cascadia Code on Google Fonts ↗
Compare Cascadia Code
See how Cascadia Code compares to other fonts side by side.
Variable Font Axes
Cascadia Code is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 700 |
How to Use Cascadia Code
Copy these code snippets to quickly add Cascadia Code to your project.
CSS code for Cascadia Code
@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:wght@100..900&display=swap');HTML code for Cascadia 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=Cascadia+Code:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Cascadia Code
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'cascadia-code': ['"Cascadia Code"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-cascadia-code">Your text here</p>Next.js code for Cascadia Code
// Using next/font (Next.js 13+)
import { Cascadia_Code } from 'next/font/google';
const cascadia_code = Cascadia_Code({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={cascadia_code.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Cascadia Code"' }}>Your text</p>Expo and React Native code for Cascadia Code
// Install: npx expo install @expo-google-fonts/cascadia-code expo-font
import { useFonts, Cascadia_Code_400Regular } from '@expo-google-fonts/cascadia-code';
export default function App() {
const [fontsLoaded] = useFonts({
Cascadia_Code_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Cascadia_Code_400Regular' }}>
Your text here
</Text>
);
}