FontScope is a modern web application that helps designers and developers visualize and explore Google Fonts combinations. It provides an intuitive interface for previewing font pairs and testing them with custom text.
- 🎨 Preview 20+ carefully curated font combinations
- 📝 Test fonts with custom text or preset pangrams
- 🎯 View different font weights and styles
- 🌗 Dark mode support
- 📱 Fully responsive design
- ⚡ Real-time font previews
- 📊 Typography scale visualization
- Clone the repository:
git clone https://github.com/jonasqin/FontScope.git
cd FontScope- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and visit
http://localhost:5173
The easiest way to deploy FontScope is to use the Vercel Platform.
- Click the "Deploy with Vercel" button above
- Import the repository to Vercel
- Vercel will automatically detect the correct settings
- Your site will be deployed to a global URL
You can also deploy FontScope to Netlify:
- Choose a font combination from the sidebar
- Or paste a Google Fonts URL in the input field
- Customize the preview text
- Explore different weights and styles
- Copy the font import code or CSS for your project
- React
- TypeScript
- Vite
- Tailwind CSS
- Lucide Icons
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- 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
This project is licensed under the MIT License - see the LICENSE file for details.
- Google Fonts for providing the font library
- All the designers and type foundries who created these beautiful fonts
- The React and Vite communities for the amazing tools