Install FontSwap
New Rocker
About New Rocker
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400
- Features
- Standard
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 →New Rocker is a modern blackletter display typeface designed by Pablo Impallari that reinterprets traditional gothic letterforms through a contemporary lens. The design merges blackletter structure with rock-and-roll energy, creating a typeface that references historical forms while serving modern creative applications.
History and Design
Pablo Impallari designed New Rocker as a blackletter face that bridges historical tradition and contemporary culture. The design takes the essential structural elements of blackletter — angular construction, heavy strokes, and fractured curves — and pushes them toward a more expressive, energetic aesthetic. The result reads as authentically gothic while feeling modern and dynamic rather than archaic.
The letterforms feature pronounced angular construction with bold stroke weight and sharp terminals. The uppercase includes moderate decorative elements that enhance display impact without excessive ornamentation. The lowercase maintains consistent blackletter rhythm with strong vertical emphasis and angular arches. The overall texture is denser and more aggressive than historical blackletter revivals, reflecting the typeface's roots in contemporary music and entertainment culture.
Best For
- Music industry materials including album art and concert promotion
- Entertainment branding for gaming, sports, and lifestyle products
- Bold headline typography for magazines and editorial features
- Street culture, tattoo-inspired, and urban design applications
- Packaging for craft beverages, specialty products, and artisanal goods
Tips
New Rocker's bold character works best at large display sizes where its angular details create maximum visual impact. The single weight provides consistent design language for headline applications. Pair with a contrasting sans-serif — something clean and geometric — to create hierarchy between decorative headlines and readable body content. The typeface's modern interpretation of blackletter makes it more accessible than strictly historical designs, suitable for audiences who connect blackletter with contemporary culture rather than medieval manuscripts.
Is New Rocker on Google Fonts?
Yes, New Rocker is available for free on Google Fonts. Get New Rocker on Google Fonts ↗
Alternative For (4)
New Rocker is a free alternative to the following premium fonts:
Modern blackletter interpretation with bold angular construction
Compare New Rocker
See how New Rocker compares to other fonts side by side.
Font Pairings
Fonts that pair well with New Rocker based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating New Rocker in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading New Rocker.
@font-face {
font-family: 'New Rocker Fallback';
src: local('Arial');
ascent-override: 94.6%;
descent-override: 28.3%;
line-gap-override: 0%;
size-adjust: 89.67%;
}How to Use New Rocker
Copy these code snippets to quickly add New Rocker to your project.
CSS code for New Rocker
@import url('https://fonts.googleapis.com/css2?family=New+Rocker:wght@400&display=swap');HTML code for New Rocker
<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=New+Rocker:wght@400&display=swap" rel="stylesheet">Tailwind code for New Rocker
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'new-rocker': ['"New Rocker"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-new-rocker">Your text here</p>Next.js code for New Rocker
// Using next/font (Next.js 13+)
import { New_Rocker } from 'next/font/google';
const new_rocker = New_Rocker({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={new_rocker.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"New Rocker"' }}>Your text</p>Expo and React Native code for New Rocker
// Install: npx expo install @expo-google-fonts/new-rocker expo-font
import { useFonts, New_Rocker_400Regular } from '@expo-google-fonts/new-rocker';
export default function App() {
const [fontsLoaded] = useFonts({
New_Rocker_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'New_Rocker_400Regular' }}>
Your text here
</Text>
);
}