The ultimate font discovery tool for designers and developers
- Font Extraction - Extract all fonts from any website URL instantly
- Live Preview - Preview each font with customizable sample text
- One-Click Download - Download fonts in WOFF, WOFF2, TTF, and OTF formats
- Free Alternatives - Discover free font alternatives with similarity matching
- Multi-Source Search - Search across 9+ font websites including Google Fonts, Font Squirrel, DaFont, and more
- Dark/Light Mode - Toggle between themes with smooth transitions
- Futuristic UI - Animated search bar with particle effects and scan lines
- Blazing Fast - Built with Next.js 15 App Router for optimal performance
- Responsive - Works beautifully on all devices
FontScope searches across multiple free font repositories:
| Source | Description |
|---|---|
| Google Fonts | Free fonts by Google |
| Font Squirrel | Free fonts for commercial use |
| DaFont | Massive free font archive |
| 1001 Fonts | Free fonts collection |
| Fontesk | Curated free fonts |
| Use Modify | Open-source fonts |
| Velvetyne | Libre type foundry |
| OSP Foundry | Open source publishing |
| LaTeX Font Catalogue | Fonts available in LaTeX |
| Dark Mode | Light Mode |
|---|---|
 |
 |
This tool does not grant licenses or permissions for font usage.
Users are solely responsible for ensuring they have the legal right to download and use any font files accessed through this tool. The service is provided for inspection and development purposes only.
Always verify that you have proper licensing before using downloaded fonts in your projects.
- Node.js 18+
- npm, yarn, pnpm, or bun
-
Clone the repository
git clone https://github.com/ShivashishY/fontscope.git cd fontscope -
Install dependencies
npm install # or yarn install # or pnpm install
-
Start the development server
npm run dev
-
Open your browser
Navigate to http://localhost:3000
graph LR
A[Enter URL] --> B[Fetch Page CSS]
B --> C[Extract Font Files]
C --> D[Display Fonts]
D --> E[Preview & Download]
D --> F[Find Alternatives]
- Enter URL - Input any website URL in the futuristic search bar
- Analysis - FontScope fetches and analyzes the page's CSS and font files
- Display - All discovered fonts are displayed with family names, weights, and styles
- Preview - Click on any font to preview it with custom text
- Download - Download fonts individually with one click
- Alternatives - Find free Google Fonts with similar styling
| Technology | Purpose |
|---|---|
| Next.js 15 | React framework with App Router |
| TypeScript | Type-safe development |
| Tailwind CSS v4 | Utility-first styling |
| Motion (Framer) | Smooth animations |
| Playwright | Web scraping & font extraction |
| Endpoint | Method | Description |
|---|---|---|
/api/extract |
POST | Extract fonts from a given URL |
/api/font |
GET | Fetch and serve font files |
/api/match |
POST | Find similar free font alternatives from multiple sources |
- WOFF2 - Web Open Font Format 2 (recommended)
- WOFF - Web Open Font Format
- TTF - TrueType Font
- OTF - OpenType Font
- Dark/Light mode toggle
- Futuristic animated search bar
- Font similarity matching
- Multi-source font search (9+ websites)
- Font pairing suggestions
- Browser extension
- Export to CSS/Figma
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
MIT License - See LICENSE file for details
This tool is intended for educational and development purposes only. Users must comply with font licensing agreements and copyright laws. The creators of this tool are not responsible for any misuse or copyright infringement by users.
Made with ❤️ for the design community