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.
Alternative For (1)
Permanent Marker is a free alternative to the following premium fonts:
How to Use Permanent Marker
Copy these code snippets to quickly add Permanent Marker to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker:wght@400&display=swap');HTML Link Tags
<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 CSS
// 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>React / Next.js
// 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>