Atreyu Font Jun 2026

<div> <span class="text-xs uppercase tracking-widest text-[var(--muted)] mb-2 block">Tailwind Config</span> <code class="block bg-[var(--bg)] p-4 rounded-lg text-sm text-[var(--accent)] overflow-x-auto whitespace-pre"> fontFamily: { 'atreyu': ['Atreyu', 'cursive', 'fallback'], }</code> </div> </div> </div> </div> </section>

<section id="showcase" class="px-6 py-20"> <div class="max-w-6xl mx-auto"> <h2 class="text-4xl md:text-5xl font-bold mb-12 text-center">Font Showcase</h2>

is a decorative typeface inspired by fantasy, gothic, and metal culture. It features sharp, elongated letterforms with dramatic serifs and high contrast between thick and thin strokes, giving it an aggressive yet mystical appearance. The font is often associated with band logos, dark fantasy book covers, video game titles, and heavy metal merchandise due to its bold, medieval-inspired aesthetic. atreyu font

<header class="px-6 py-12 md:py-20"> <nav class="max-w-6xl mx-auto flex justify-between items-center mb-16 opacity-0 animate-entrance"> <span class="text-2xl tracking-wide">Atreyu</span> <div class="flex gap-8 text-sm text-[var(--muted)]"> <a href="#showcase" class="underline-accent hover:text-[var(--fg)] transition-colors">Showcase</a> <a href="#weights" class="underline-accent hover:text-[var(--fg)] transition-colors">Weights</a> <a href="#usage" class="underline-accent hover:text-[var(--fg)] transition-colors">Usage</a> </div> </nav>

<div class="bg-[var(--card)] border border-[var(--border)] rounded-xl p-8 card-hover"> <span class="text-xs uppercase tracking-widest text-[var(--muted)] mb-4 block">Editorial</span> <h3 class="text-4xl md:text-5xl mb-4">Magazine Title</h3> <p class="text-[var(--muted)]">Perfect for editorial designs that demand attention and personality.</p> </div> box-shadow 0.3s ease

The font is available for personal use from various free font websites, while commercial usage usually requires a license. Designers should verify the licensing terms before incorporating it into client projects. For a cohesive look, Atreyu Font pairs well with minimalist sans-serif typefaces or distressed textures.

<footer class="px-6 py-12 border-t border-[var(--border)]"> <div class="max-w-6xl mx-auto text-center"> <p class="text-2xl mb-4">Atreyu Font</p> <p class="text-sm text-[var(--muted)]">Available via Google Fonts. Free for personal and commercial use.</p> </div> </footer> } .card-hover:hover { transform: translateY(-4px)

Designed to evoke strength and rebellion, Atreyu Font typically includes uppercase letters with stylistic alternates, swashes, and ornamental details. It is not to be confused with the metalcore band Atreyu , though the font shares a similar thematic energy and is occasionally used in fan-made materials related to the group.

.animate-entrance { animation: fadeSlideUp 0.8s ease forwards; }

/* Card hover effect */ .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 212, 170, 0.1); }

/* Subtle background pattern */ .bg-pattern { background-image: radial-gradient(circle at 20% 20%, rgba(0, 212, 170, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 212, 170, 0.02) 0%, transparent 50%); }