FontID is a user-friendly web application that allows users to discover, preview, and copy various web fonts from any URL. With its sleek design, powered by particles.js for a dynamic background effect, FontID makes finding fonts from websites as easy as entering a URL.
Whether you're a web designer, developer, or someone looking to explore different fonts, FontID provides a simple yet powerful tool to collect the perfect font for your projects. Simply input any URL and fetch the fonts used on that site!
- Font Discovery: Fetch fonts used on any website by entering its URL.
- Live Preview: See examples of each font in real time with an example text.
- Font Copy: Copy any font directly to your clipboard to use in your own projects.
- Particles.js Background: A beautiful, dynamic background created using particles.js, adding a futuristic feel to the interface.
- Responsive Design: Fully optimized for mobile, tablet, and desktop views.
- Simple User Interface: Clean and intuitive UI with easy-to-use features.
Visit FontID Demo to try out the application.
- Next.js: A powerful React framework for building static and dynamic websites.
- Tailwind CSS: Utility-first CSS framework to rapidly build custom designs.
- Particles.js: A lightweight JavaScript library for creating particles and interactive animations in the background.
- React: JavaScript library for building user interfaces.
To run this project locally, you need to have Node.js and npm installed. Follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/fontid.git cd fontid -
Install dependencies:
npm install
-
Run the application:
npm run dev
-
Open your browser and visit http://localhost:3000.
- Enter a URL: Simply type in any URL (e.g., https://google.com) in the input box.
- Fetch Fonts: Click the Fetch Fonts button to discover the fonts used on the website.
- Preview & Copy: Browse through the font list, see their previews, and click Copy Font to add them to your clipboard.
We welcome contributions to improve FontID. If you'd like to contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Make your changes.
- Commit your changes (
git commit -m 'Add new feature'). - Push to your fork (
git push origin feature-branch). - Open a pull request.
This project is open-source and available under the MIT License.
- Particles.js for the dynamic background.
- Tailwind CSS for the amazing utility-first styling.
- Next.js for making the development process seamless and efficient.