FontExtract

A modern web application for extracting and downloading fonts from websites for educational purposes. Built with Next.js 16, React 19, and Tailwind CSS.

✨ Features

• 🔍 Font Extraction - Extract all fonts from any website URL
• 📥 Easy Download - Download fonts with a single click
• 🎨 Font Preview - Preview fonts before downloading
• 🔎 Search & Filter - Search fonts by name, family, or source
• 📊 Export to CSV - Export font lists for documentation
• 🌓 Dark Mode - Full dark mode support with system preference detection
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile
• ⚖️ License Information - Educational content about font licensing
• 🎯 Domain Suggestions - Quick domain TLD suggestions (.com, .org, etc.)

🚀 Getting Started

Prerequisites

• Node.js 18+ or higher
• npm, pnpm, or yarn

Installation

1. Clone the repository:

git clone https://github.com/yourusername/fontextract.git
cd fontextract

2. Install dependencies:

npm install
# or
pnpm install
# or
yarn install

3. Run the development server:

npm run dev
# or
pnpm dev
# or
yarn dev

4. Open http://localhost:3000 in your browser.

🛠️ Tech Stack

• Framework: Next.js 16 with App Router
• UI Library: React 19
• Styling: Tailwind CSS
• UI Components: Radix UI
• Theme: next-themes
• Icons: Lucide React
• Language: TypeScript

📁 Project Structure

fontextract/
├── app/
│   ├── api/
│   │   ├── download-font/     # Font download API endpoint
│   │   └── extract-fonts/     # Font extraction API endpoint
│   ├── globals.css            # Global styles and theme variables
│   ├── layout.tsx             # Root layout with theme provider
│   ├── loading.tsx            # Loading state
│   └── page.tsx               # Main application page
├── components/
│   ├── ui/                    # Reusable UI components (shadcn/ui)
│   ├── EducationalGuide.tsx   # Font licensing education
│   ├── FontList.tsx           # Font display and download
│   ├── Logo.tsx               # Application logo
│   ├── ThemeToggle.tsx        # Dark/light mode toggle
│   └── theme-provider.tsx     # Theme context provider
├── hooks/                     # Custom React hooks
├── lib/                       # Utility functions
├── public/                    # Static assets
└── styles/                    # Additional styles

🎨 Features in Detail

Font Extraction

Enter any website URL to extract all fonts used on that page. The app analyzes:

• Web fonts (WOFF, WOFF2, TTF, OTF, EOT, SVG)
• Google Fonts
• Custom fonts
• Font families and variations

Font Information

For each font, you'll see:

• Font name and family
• File type and size
• Source URL
• License information (when available)
• Live preview with sample text

Search & Filter

• Real-time search across font names, families, and sources
• Grouped display by font source
• Export filtered results to CSV

Educational Content

Learn about:

• Font licensing types (Open Source, Commercial, etc.)
• Font file formats (WOFF, TTF, OTF, etc.)
• Ethical usage guidelines
• Legal considerations
• Free font alternatives

⚖️ Legal Disclaimer

IMPORTANT: This tool is provided for educational purposes only. Users are solely responsible for ensuring they have the right to download and use fonts. Always:

• ✅ Verify font licenses before use
• ✅ Respect copyright and intellectual property rights
• ✅ Use only openly licensed fonts or fonts you have permission to use
• ❌ Do not download fonts from subscription services without authorization
• ❌ Do not redistribute copyrighted fonts

Unauthorized distribution or commercial use of copyrighted fonts is illegal.

🌐 API Endpoints

POST /api/extract-fonts

Extract fonts from a website URL.

Request Body:

{
  "url": "https://example.com"
}

Response:

{
  "fonts": [
    {
      "name": "Font Name",
      "family": "Font Family",
      "type": "woff2",
      "size": "24.5 KB",
      "url": "https://...",
      "source": "Google Fonts",
      "filename": "font-name.woff2",
      "isOpenSource": true,
      "license": "OFL"
    }
  ]
}

POST /api/download-font

Download a font file through a proxy to avoid CORS issues.

Request Body:

{
  "url": "https://fonts.gstatic.com/..."
}

🎨 Customization

Theme Colors

Edit app/globals.css to customize the color scheme:

:root {
  --primary: 217 91% 60%;      /* Blue */
  --secondary: 210 40% 96%;    /* Light gray */
  --accent: 210 40% 96%;       /* Accent color */
  /* ... more variables */
}

Domain Suggestions

Edit the DOMAIN_SUGGESTIONS array in app/page.tsx:

const DOMAIN_SUGGESTIONS = ['.com', '.org', '.net', /* ... */]

📦 Build for Production

npm run build
npm start

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Contact

• Telegram: @tmeta9

🙏 Acknowledgments

• Next.js - The React Framework
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Unstyled, accessible components
• Lucide - Beautiful & consistent icons
• shadcn/ui - Re-usable components

📝 Changelog

Version 1.0.0 (2024)

• Initial release
• Font extraction from websites
• Download functionality
• Dark mode support
• Educational content
• CSV export
• Responsive design

---

Made with ❤️ for the web development community