FunFonts.fun

FunFonts.fun — современное и удобное веб-приложение для быстрой и бесплатной загрузки шрифтов. Построено на фреймворке Astro, сайт предлагает визуально привлекательную галерею шрифтов и не требует регистрации.

💡 Особенности

  • 🔤 Скачивание шрифтов — доступ к сотням бесплатных шрифтов в форматах TTF и OTF
  • 🔓 Без регистрации — мгновенная загрузка без создания аккаунта
  • 🖼 Интерактивная галерея — предпросмотр каждого шрифта с миниатюрами
  • 📱 Адаптивный дизайн — современный интерфейс для всех экранов
  • 📄 Индивидуальные страницы шрифтов — подробный просмотр и опции скачивания
  • 📊 SEO-оптимизация — семантическая разметка и структурированные данные
  • 🔁 Пагинация — удобно организованный просмотр коллекции

🛠 Технологии

  • Фреймворк: Astro
  • Стилизация: Компонентно-изолированный CSS
  • Данные: JSON-коллекция шрифтов с метаданными
  • UI: Компонентная архитектура с интерактивным JavaScript

📁 Структура проекта

/
├── public/            # Статические ассеты (favicon, изображения)
├── src/
│   ├── components/    # Повторно используемые компоненты Astro
│   │   ├── FontCard.astro
│   │   ├── Header.astro
│   │   ├── Pagination.astro
│   │   ├── SearchBar.astro
│   │   └── Welcome.astro
│   ├── data/
│   │   └── fonts.json     # Метаданные коллекции шрифтов
│   ├── layouts/
│   │   └── Layout.astro   # Базовый макет
│   ├── pages/
│   │   ├── about.astro
│   │   ├── index.astro
│   │   ├── font/[slug].astro
│   │   └── page/[page].astro
│   └── assets/            # Статические файлы
└── package.json

🚀 Быстрый старт

Требования

  • Node.js v18+
  • npm или yarn

Установка

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

Откройте в браузере: http://localhost:4321

📚 Формат данных шрифтов

{
  "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"]
}

🧩 Основные компоненты

FontCard

  • Галерея предпросмотра с навигацией
  • Кнопки загрузки TTF/OTF
  • Доступность и семантика

Pagination

  • Навигация по страницам шрифтов
  • SEO-дружественная структура URL

Layout

  • Метатеги и структура
  • Градиентный фон и отзывчивый макет

🌐 SEO и доступность

  • Семантический HTML
  • JSON-LD разметка
  • Оптимизация изображений
  • Поддержка скринридеров

🤝 Вклад

  1. Форк проекта
  2. Создай ветку
  3. Внеси изменения
  4. Протестируй
  5. Оформи pull request

📜 Лицензия

Проект предназначен для учебных и портфолио-целей. Лицензии шрифтов варьируются — см. информацию на страницах конкретных шрифтов.

FunFonts.fun — шрифты без барьеров ✨