Having grown up practicing calligraphy, Eckler sought to create a typeface that bridged the gap between the ornate scripts of the medieval era and the clean-cut aesthetics of modern graphic design. The result is a font that Eckler himself notes can express everything from "Heavy Metal to Happy Holidays". Design Characteristics
The typeface features a dramatic interplay between thick vertical stems and thin horizontal breaks, typical of the blackletter family.
<div class="space-y-8"> <div class="flex flex-col md:flex-row md:items-center gap-4 p-6 border border-[var(--border)] rounded-xl"> <span class="text-sm text-[var(--muted)] w-32 shrink-0">Regular 400</span> <span class="text-3xl md:text-4xl">The quick brown fox jumps over the lazy dog</span> </div> <div class="flex flex-col md:flex-row md:items-center gap-4 p-6 border border-[var(--border)] rounded-xl"> <span class="text-sm text-[var(--muted)] w-32 shrink-0">Bold 700</span> <span class="text-3xl md:text-4xl font-bold">The quick brown fox jumps over the lazy dog</span> </div> </div> </div> </section> atreyu font
<div> <span class="text-xs uppercase tracking-widest text-[var(--muted)] mb-2 block">CSS</span> <code class="block bg-[var(--bg)] p-4 rounded-lg text-sm text-[var(--accent)] overflow-x-auto"> font-family: 'Atreyu', cursive; </code> </div>
/* Animated underline */ .underline-accent { position: relative; } .underline-accent::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .underline-accent:hover::after { transform: scaleX(1); } Having grown up practicing calligraphy, Eckler sought to
When styled with softer colors, it can serve as a sophisticated, "old-world" holiday font. Licensing and Availability Getty Museum exemplars with detailed zoom capabilities
<div class="max-w-6xl mx-auto text-center"> <h1 class="text-6xl md:text-8xl lg:text-9xl font-bold tracking-tight mb-6 opacity-0 animate-entrance delay-1"> Atreyu </h1> <p class="text-xl md:text-2xl text-[var(--muted)] max-w-2xl mx-auto mb-8 opacity-0 animate-entrance delay-2"> A distinctive display typeface with character and presence. Perfect for headlines, logos, and creative projects. </p> <div class="flex gap-4 justify-center opacity-0 animate-entrance delay-3"> <a href="#showcase" class="px-6 py-3 bg-[var(--accent)] text-[var(--bg)] font-bold rounded hover:opacity-90 transition-opacity"> View Showcase </a> <a href="#usage" class="px-6 py-3 border border-[var(--border)] rounded hover:border-[var(--accent)] transition-colors"> Get Started </a> </div> </div> </header> View Showcase <
<script> // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); });