Install FontSwap
Permanent Marker
About Permanent Marker
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400
- Features
- Standard
Free to use, modify, and distribute. Permits commercial use with attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Permanent Marker is a bold, hand-drawn display typeface designed by Font Diner. It captures the distinctive look of thick permanent marker writing, offering an authentic hand-lettered appearance for casual and energetic designs.
History and Design
Font Diner created Permanent Marker to replicate the bold, slightly rough character of actual permanent marker handwriting. The design features thick strokes, organic edges, and the natural variation you'd see from a real marker. Unlike more polished display fonts, it embraces imperfection for authenticity.
Why Permanent Marker is Popular
Permanent Marker has become a go-to choice for designers seeking an authentic hand-drawn look without custom lettering. It serves as a free alternative to premium marker fonts used in packaging, advertising, and youth-oriented branding. The bold character ensures visibility and impact in promotional materials.
Technical Features
- Single weight: Bold marker-style weight
- Hand-drawn quality: Organic, slightly rough edges
- Uppercase focus: Strong caps with lowercase available
- Basic Latin: Core character support
- High impact: Designed for visibility
Best Use Cases
Permanent Marker excels in:
- Poster design: High-visibility headlines
- Youth marketing: Energetic, casual campaigns
- Packaging: Craft and artisanal products
- Sports branding: Dynamic, athletic aesthetic
- Protest and activism: Bold, attention-grabbing statements
Usage Tips
Use Permanent Marker at large sizes (32px+) where the marker texture is visible. The single weight means hierarchy comes from size only. Limit to headlines and very short text. Avoid for body text or professional contexts. Pairs well with clean sans-serifs like Open Sans or Roboto for supporting text. Works best on simple backgrounds that don't compete with the textured letterforms.
Is Permanent Marker on Google Fonts?
Yes, Permanent Marker is available for free on Google Fonts. Get Permanent Marker on Google Fonts ↗
Alternative For (1)
Permanent Marker is a free alternative to the following premium fonts:
Compare Permanent Marker
See how Permanent Marker compares to other fonts side by side.
Font Pairings
Fonts that pair well with Permanent Marker based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Permanent Marker in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Permanent Marker.
@font-face {
font-family: 'Permanent Marker Fallback';
src: local('Arial');
ascent-override: 60.74%;
descent-override: 5.96%;
line-gap-override: 5.96%;
size-adjust: 117.7%;
}How to Use Permanent Marker
Copy these code snippets to quickly add Permanent Marker to your project.
CSS code for Permanent Marker
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker:wght@400&display=swap');HTML code for Permanent Marker
<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=Permanent+Marker:wght@400&display=swap" rel="stylesheet">Tailwind code for Permanent Marker
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'permanent-marker': ['"Permanent Marker"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-permanent-marker">Your text here</p>Next.js code for Permanent Marker
// Using next/font (Next.js 13+)
import { Permanent_Marker } from 'next/font/google';
const permanent_marker = Permanent_Marker({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={permanent_marker.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Permanent Marker"' }}>Your text</p>Expo and React Native code for Permanent Marker
// Install: npx expo install @expo-google-fonts/permanent-marker expo-font
import { useFonts, Permanent_Marker_400Regular } from '@expo-google-fonts/permanent-marker';
export default function App() {
const [fontsLoaded] = useFonts({
Permanent_Marker_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Permanent_Marker_400Regular' }}>
Your text here
</Text>
);
}