Install FontSwap
Hubot Sans
About Hubot 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 →Hubot Sans is GitHub's display-oriented variable typeface, designed as a companion to Mona Sans. With weight and width axes, it provides impactful headline typography for technical and creative contexts.
Best Use Cases
Hubot Sans works well for:
- Tech conference branding: Event titles, speaker cards, banners
- Open source projects: README headers, documentation splash pages
- Developer marketing: Feature announcements, blog post headers
- Display typography: Hero sections, pull quotes, data callouts
Usage Tips
Like Mona Sans, Hubot Sans features dual variable axes (weight 200-900, width 75-125). Use at display sizes (32px+) for maximum impact. The expanded widths at heavy weights create dramatic headlines. Pair with Mona Sans for body text to create a cohesive GitHub-inspired type system.
Is Hubot Sans on Google Fonts?
No, Hubot Sans is not on Google Fonts. It is available from ↗
Alternative For (3)
Hubot Sans is a free alternative to the following premium fonts:
Compare Hubot Sans
See how Hubot Sans compares to other fonts side by side.
Variable Font Axes
Hubot 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 Hubot Sans
Copy these code snippets to quickly add Hubot Sans to your project.
CSS code for Hubot Sans
/* Download from: https://github.com/github/hubot-sans */
@font-face {
font-family: "Hubot Sans";
src: url('/fonts/hubot-sans.woff2') format('woff2');
font-display: swap;
}HTML code for Hubot Sans
<!-- Download from: https://github.com/github/hubot-sans -->
<link href="/fonts/hubot-sans.css" rel="stylesheet">Tailwind code for Hubot Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'hubot-sans': ['"Hubot Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-hubot-sans">Your text here</p>Next.js code for Hubot Sans
// Import the font CSS in your _app.js or layout
import '/fonts/hubot-sans.css';
export default function Component() {
return (
<p style={{ fontFamily: '"Hubot Sans"' }}>
Your text here
</p>
);
}Expo and React Native code for Hubot Sans
// Install: npx expo install expo-font
import { useFonts } from 'expo-font';
export default function App() {
const [fontsLoaded] = useFonts({
'Hubot Sans': require('./assets/fonts/hubot-sans.ttf'),
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Hubot Sans' }}>
Your text here
</Text>
);
}
// Download font from: https://github.com/github/hubot-sans