Atreyu Font -

<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=Atreyu:wght@400;700&display=swap" rel="stylesheet">

/* 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); }

: Unlike traditional, dense Gothic scripts, Atreyu features cleaner lines and more open spacing, which improves readability while retaining a "story-book" or historic feel. atreyu font

<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">Creative</span> <h3 class="text-4xl md:text-5xl mb-4">Art Direction</h3> <p class="text-[var(--muted)]">Push creative boundaries with a typeface that stands apart from the ordinary.</p> </div> </div> </div> </section>

// Observe all cards document.querySelectorAll('.card-hover').forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(card); }); </script> </body> </html>

<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> Released in through the Lost Type Co-op ,

// Intersection Observer for scroll reveals const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' };

/* 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%); }

<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> Perfect for headlines, logos, and creative projects

Its sharp, aggressive angles make it a natural fit for metal and rock aesthetics.

Released in through the Lost Type Co-op , Atreyu is a contemporary textura blackletter . Eckler’s inspiration for the font stems from 14th-century Gothic illuminated manuscripts from Germany.

<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>