Install FontSwap
Red Hat Display
About Red Hat Display
- 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 →Red Hat Display is the display companion to Red Hat Text, designed by MCKL for Red Hat's brand identity. Optimized for headlines and large text, it features open apertures and distinctive ink traps that give it character at display sizes.
Best Use Cases
Red Hat Display works well for:
- Tech company branding: Headlines, hero sections, marketing banners
- Conference materials: Event branding, slide decks, posters
- Open source projects: Documentation headers, README banners
- Enterprise dashboards: Section headers, data visualization labels
Usage Tips
Use Red Hat Display for headlines (24px+) and pair with Red Hat Text for body copy, or any neutral sans-serif. The variable weight axis (300-900) with italics gives full typographic flexibility. The ink traps become visible and attractive at 48px+.
Is Red Hat Display on Google Fonts?
Yes, Red Hat Display is available for free on Google Fonts. Get Red Hat Display on Google Fonts ↗
Alternative For (5)
Red Hat Display is a free alternative to the following premium fonts:
Display-oriented sans with distinctive ink traps
Compare Red Hat Display
See how Red Hat Display compares to other fonts side by side.
Variable Font Axes
Red Hat Display is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 300 | 400 | 900 |
How to Use Red Hat Display
Copy these code snippets to quickly add Red Hat Display to your project.
CSS code for Red Hat Display
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@100..900&display=swap');HTML code for Red Hat Display
<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=Red+Hat+Display:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Red Hat Display
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'red-hat-display': ['"Red Hat Display"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-red-hat-display">Your text here</p>Next.js code for Red Hat Display
// Using next/font (Next.js 13+)
import { Red_Hat_Display } from 'next/font/google';
const red_hat_display = Red_Hat_Display({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={red_hat_display.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Red Hat Display"' }}>Your text</p>Expo and React Native code for Red Hat Display
// Install: npx expo install @expo-google-fonts/red-hat-display expo-font
import { useFonts, Red_Hat_Display_400Regular } from '@expo-google-fonts/red-hat-display';
export default function App() {
const [fontsLoaded] = useFonts({
Red_Hat_Display_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Red_Hat_Display_400Regular' }}>
Your text here
</Text>
);
}