Install FontSwap
Mona Sans
About Mona Sans
- Source
- ↗
- 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 →Mona Sans is GitHub's variable sans-serif typeface, designed by Degarism Studio. It features both weight and width axes, making it exceptionally versatile — from condensed UI text to expanded display headlines, all from a single font file.
Best Use Cases
Mona Sans excels in:
- Developer tools: IDE themes, documentation sites, README badges
- Tech products: SaaS interfaces, developer portals
- Brand identity: Tech startups, open source project branding
- Responsive design: Width axis adapts typography to viewport sizes
Usage Tips
Mona Sans's dual-axis variable font (weight 200-900, width 75-125) is its killer feature. Use the width axis to create condensed variants for navigation and expanded variants for hero text — no separate font files needed. Download from GitHub and self-host.
Is Mona Sans on Google Fonts?
No, Mona Sans is not on Google Fonts. It is available from ↗
Alternative For (3)
Mona Sans is a free alternative to the following premium fonts:
GitHub variable sans with weight and width axes
Compare Mona Sans
See how Mona Sans compares to other fonts side by side.
Variable Font Axes
Mona Sans is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
| wdth | 75 | 100 | 125 |
How to Use Mona Sans
Copy these code snippets to quickly add Mona Sans to your project.
CSS code for Mona Sans
/* Download from: https://github.com/github/mona-sans */
@font-face {
font-family: "Mona Sans";
src: url('/fonts/mona-sans.woff2') format('woff2');
font-display: swap;
}HTML code for Mona Sans
<!-- Download from: https://github.com/github/mona-sans -->
<link href="/fonts/mona-sans.css" rel="stylesheet">Tailwind code for Mona Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'mona-sans': ['"Mona Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-mona-sans">Your text here</p>Next.js code for Mona Sans
// Import the font CSS in your _app.js or layout
import '/fonts/mona-sans.css';
export default function Component() {
return (
<p style={{ fontFamily: '"Mona Sans"' }}>
Your text here
</p>
);
}Expo and React Native code for Mona Sans
// Install: npx expo install expo-font
import { useFonts } from 'expo-font';
export default function App() {
const [fontsLoaded] = useFonts({
'Mona Sans': require('./assets/fonts/mona-sans.ttf'),
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Mona Sans' }}>
Your text here
</Text>
);
}
// Download font from: https://github.com/github/mona-sans