Install FontSwap
Commissioner
About Commissioner
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable
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 →Most variable fonts let you dial weight. Commissioner, designed by Kostas Bartsokas, lets you dial its personality.
The family has three "voices". The default is a low-contrast grotesque with straight stems. Raise the Flair axis (FLAR) and the terminals swell into almost glyphic serifs; raise the Volume axis (VOLM) and those serifs turn wedge-like. Underneath sit almost classical, humanist proportions, so even the plain setting has more warmth than a typical grotesque.
The Google Fonts build adds a weight axis from Thin (100) to Black (900) and a slant axis from 0 to −12 degrees. There are no separate italic files on Google Fonts; slanted styles come from that axis.
That combination suits brands that need several textures from one family: the default voice for body copy, a flared voice for pull quotes, a high-volume setting for posters. The discipline is in choosing two or three axis positions and documenting them, otherwise the typography drifts from page to page.
Language support on Google Fonts covers Latin, Latin Extended, Vietnamese, Greek, Cyrillic and Cyrillic Extended. Commissioner is free under the SIL Open Font License 1.1.
Is Commissioner on Google Fonts?
Yes, Commissioner is available for free on Google Fonts. Get Commissioner on Google Fonts ↗
Compare Commissioner
See how Commissioner compares to other fonts side by side.
Variable Font Axes
Commissioner is a variable font with 4 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
| slnt | -12 | 0 | 0 |
| FLAR | 0 | 0 | 100 |
| VOLM | 0 | 0 | 100 |
How to Use Commissioner
Copy these code snippets to quickly add Commissioner to your project.
CSS code for Commissioner
@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap');HTML code for Commissioner
<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=Commissioner:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Commissioner
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'commissioner': ['Commissioner', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-commissioner">Your text here</p>Next.js code for Commissioner
// Using next/font (Next.js 13+)
import { Commissioner } from 'next/font/google';
const commissioner = Commissioner({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={commissioner.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Commissioner'" }}>Your text</p>Expo and React Native code for Commissioner
// Install: npx expo install @expo-google-fonts/commissioner expo-font
import { useFonts, Commissioner_400Regular } from '@expo-google-fonts/commissioner';
export default function App() {
const [fontsLoaded] = useFonts({
Commissioner_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Commissioner_400Regular' }}>
Your text here
</Text>
);
}