FunFonts.fun

FunFonts.fun is a sleek and easy-to-use web app for browsing and downloading free fonts. Built with Astro, it features a visually rich font gallery with no sign-up required.

---

💡 Features

• 🔤 Font Downloads — access hundreds of free fonts in TTF and OTF formats
• 🔓 No Registration — instant download with no account needed
• 🖼 Interactive Gallery — preview fonts with thumbnails
• 📱 Responsive Design — clean UI for all screen sizes
• 📄 Font Detail Pages — detailed previews and download options
• 📊 SEO Optimized — semantic HTML and structured data
• 🔁 Pagination — easy navigation across font pages

---

🛠 Technologies

• Framework: Astro
• Styling: Component-scoped CSS
• Data: JSON collection with font metadata
• UI: Component-based architecture with interactive JavaScript

---

📁 Project Structure

/
├── public/            # Static assets (favicon, images)
├── src/
│   ├── components/    # Reusable Astro components
│   │   ├── FontCard.astro
│   │   ├── Header.astro
│   │   ├── Pagination.astro
│   │   ├── SearchBar.astro
│   │   └── Welcome.astro
│   ├── data/
│   │   └── fonts.json     # Font metadata collection
│   ├── layouts/
│   │   └── Layout.astro   # Base layout
│   ├── pages/
│   │   ├── about.astro
│   │   ├── index.astro
│   │   ├── font/[slug].astro
│   │   └── page/[page].astro
│   └── assets/            # Static files
└── package.json

---

🚀 Quick Start

Requirements

• Node.js v18+
• npm or yarn

Installation

git clone https://github.com/temaprint/funfonts.fun.git
cd funfonts.fun
npm install
npm run dev

Open in browser: http://localhost:4321

---

📚 Font Data Format

{
  "title": "font-name",
  "src_pic_1": "preview-image-url",
  "src_pic_2": "preview-image-url",
  "src_pic_3": "preview-image-url",
  "src_pic_4": "preview-image-url",
  "src_pic_5": "preview-image-url",
  "ttf_files": ["font-file-url"],
  "otf_files": ["font-file-url"]
}

---

🧩 Core Components

FontCard

• Preview gallery with navigation
• TTF/OTF download buttons
• Accessibility and semantic HTML

Pagination

• Font page navigation
• SEO-friendly URL structure

Layout

• Meta tags and layout structure
• Gradient background and responsive grid

---

🌐 SEO & Accessibility

• Semantic HTML structure
• JSON-LD structured data
• Image optimization
• Screen reader support

---

🤝 Contribution

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Test them
5. Submit a pull request

---

📜 License

This project is for educational and portfolio purposes. Font licenses vary — see font pages for details.

---

FunFonts.fun — fonts without barriers ✨