FontPair Studio is a React playground for exploring practical Google Font combinations. Search and filter curated pairings, preview them in real interface-style layouts, copy CSS snippets, open the fonts, and save favourites locally.
- Search font pairs by name or font family
- Filter by use-case and mood
- Full-screen typography previews with local shortlist storage
- Copy ready-to-use CSS and open fonts on Google Fonts
- Responsive fixed header, icon footer, theme toggle, and go-to-top button
React, Vite, styled-components, React Icons, and browser localStorage.
npm install
npm run devnpm run lint
npm run build
npm run deployLive demo: a2rp.github.io/fontpair-studio
- Portfolio: https://www.ashishranjan.net
- GitHub: https://github.com/a2rp
- CodePen: https://codepen.io/ash1198
- LinkedIn: https://www.linkedin.com/in/aashishranjan
- Facebook: https://www.facebook.com/theash.ashish/
- YouTube: https://www.youtube.com/@ashishranjan-ashz?sub_confirmation=1
- Email: [email protected]
- Support: https://a2rp-donation-page.netlify.app/
- Buy Me a Coffee: https://buymeacoffee.com/a2rp
- Patreon: https://www.patreon.com/a2rp