Install FontSwap
Rubik
About Rubik
- 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 →Rubik is a sans-serif typeface with slightly rounded corners, designed by Hubert & Fischer and expanded by Cyreal. Released in 2015, it offers a friendly, approachable character with excellent multi-script support.
History and Design
Hubert & Fischer originally designed Rubik as part of the Chrome Cube Lab project. Meir Sadan later expanded the family to include Hebrew support, and Cyreal added Cyrillic. The design features subtle rounded corners that soften the geometric foundation, creating a warm, friendly appearance without sacrificing professionalism.
Why Rubik is Popular
Rubik has become popular for its versatility and comprehensive language support. It serves as a free alternative to premium rounded sans-serifs like Circular and Proxima Nova. The Hebrew and Arabic support makes it particularly valuable for projects targeting Middle Eastern markets or requiring right-to-left languages.
Technical Features
- Variable font: Weight axis from Light (300) to Black (900)
- True italics: Carefully designed cursive forms
- Multi-script support: Latin, Cyrillic, Hebrew, and Arabic
- Rounded corners: Subtle softening of geometric forms
- OpenType features: Tabular figures, case-sensitive forms
Best Use Cases
Rubik excels in:
- App interfaces: Friendly, readable UI typography
- Multilingual projects: Seamless across scripts
- Tech branding: Modern, approachable identity
- Documentation: Clear technical content
- Corporate communications: Professional yet friendly
Usage Tips
For body text, use weight 400 at 16px with 1.5 line height. Use weight 500-600 for headings and 700-800 for display. The rounded corners become more apparent at larger sizes. Enable tabular figures for data-heavy interfaces. Pairs well with serif fonts for editorial contrast. The extensive language support makes it ideal for internationalized applications.
Is Rubik on Google Fonts?
Yes, Rubik is available for free on Google Fonts. Get Rubik on Google Fonts ↗
Alternative For (2)
Rubik is a free alternative to the following premium fonts:
Rounded geometric sans with variable support and friendly corporate character
Compare Rubik
See how Rubik compares to other fonts side by side.
Variable Font Axes
Rubik is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 300 | 400 | 900 |
Font Pairings
Fonts that pair well with Rubik based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Rubik in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Rubik.
@font-face {
font-family: 'Rubik Fallback';
src: local('Arial');
ascent-override: 93.5%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 100.28%;
}How to Use Rubik
Copy these code snippets to quickly add Rubik to your project.
CSS code for Rubik
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100..900&display=swap');HTML code for Rubik
<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=Rubik:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Rubik
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'rubik': ['Rubik', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-rubik">Your text here</p>Next.js code for Rubik
// Using next/font (Next.js 13+)
import { Rubik } from 'next/font/google';
const rubik = Rubik({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={rubik.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Rubik'" }}>Your text</p>Expo and React Native code for Rubik
// Install: npx expo install @expo-google-fonts/rubik expo-font
import { useFonts, Rubik_400Regular } from '@expo-google-fonts/rubik';
export default function App() {
const [fontsLoaded] = useFonts({
Rubik_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Rubik_400Regular' }}>
Your text here
</Text>
);
}