Atreyu Font 2021 < FHD × UHD >
<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>
It is ideal for designs requiring a sense of tradition or antiquity. atreyu font
<div class="grid md:grid-cols-2 gap-6"> <!-- Card 1 --> <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">Headlines</span> <h3 class="text-4xl md:text-5xl mb-4">Bold Statement</h3> <p class="text-[var(--muted)]">Atreyu shines in large display sizes where its unique character can be fully appreciated.</p> </div> <div class="grid md:grid-cols-2 gap-6"> <
<!-- Weights Section --> <section id="weights" class="px-6 py-20 bg-[var(--card)]"> <div class="max-w-6xl mx-auto"> <h2 class="text-4xl md:text-5xl font-bold mb-12 text-center">Available Weights</h2> div class="grid md:grid-cols-2 gap-6">
<!-- Card 2 --> <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">Branding</span> <h3 class="text-4xl md:text-5xl mb-4">Brand Identity</h3> <p class="text-[var(--muted)]">Create memorable logos and brand marks with distinctive typographic presence.</p> </div>
<!-- Footer --> <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>