Font View — Browse, Compare & Sync Your Local Fonts
We built a web app that lets designers and developers browse, preview, compare, and cloud-sync their local fonts — with virtual scrolling that handles thousands of fonts smoothly.
The Challenge
Designers and developers deal with hundreds — sometimes thousands — of fonts installed on their machines. Browsing them through system settings is slow and limited. There’s no easy way to preview custom text, compare fonts side by side, or sync favorites across devices.
We built Font View to fix that.
What We Built
Font View is a web app that uses the Local Font Access API to access your local fonts directly from the browser — no manual file uploads needed.
Instant Browse & Preview
Type any text and see it rendered in any font installed on your machine. Adjust size, search by name or family, and sort however you like. Virtual scrolling ensures smooth performance even with 1000+ fonts.
Side-by-Side Compare
Compare up to 6 fonts at once — side by side or stacked. Perfect for choosing the right typeface for your project.
Smart Cloud Sync
Create an account and sync your fonts to the cloud. The system uses SHA-256 hashing for deduplication — only new fonts get uploaded. A progress bar shows every stage: scanning, checking, uploading, done.
Advanced Organization
Star fonts for quick access. Create named collections and reorder with drag-and-drop. Light, dark, and system theme modes supported.
Tech Stack
Built with Next.js 16, TypeScript, Tailwind CSS, and shadcn/ui. PostgreSQL database with Drizzle ORM, NextAuth.js authentication, and MinIO (S3-compatible) file storage. Deployed with Docker Compose.
Why This Matters
Font View demonstrates our ability to build real productivity tools — combining polished interfaces with solid cloud infrastructure. From virtual scrolling for thousands of items to smart sync — every detail is intentionally crafted.
التحدي
المصممون والمطورون يتعاملون مع مئات — وأحياناً آلاف — الخطوط المثبتة على أجهزتهم. تصفح هذه الخطوط من خلال إعدادات النظام بطيء ومحدود. لا توجد طريقة سهلة لمعاينة نص مخصص، أو مقارنة خطوط جنباً إلى جنب، أو مزامنة المفضلة عبر الأجهزة.
بنينا Font View لحل هذه المشكلة.
ما بنيناه
Font View تطبيق ويب يستخدم Local Font Access API للوصول إلى خطوطك المحلية مباشرة من المتصفح — بدون تحميل ملفات يدوياً.
تصفح ومعاينة فورية
اكتب أي نص وشاهده معروضاً بأي خط مثبت على جهازك. غيّر الحجم، ابحث بالاسم أو العائلة، ورتّب حسب تفضيلك. التمرير الافتراضي يضمن أداءً سلساً حتى مع أكثر من 1000 خط.
مقارنة جنب لجنب
قارن حتى 6 خطوط في وقت واحد — عرض متجاور أو متراص. مثالي لاختيار الخط المناسب لمشروعك.
مزامنة سحابية ذكية
سجّل حساباً وزامن خطوطك مع السحابة. النظام يستخدم تجزئة SHA-256 للكشف عن التكرارات — فقط الخطوط الجديدة يتم رفعها. شريط تقدم يوضح كل مرحلة: مسح ← فحص ← رفع ← تم.
تنظيم متقدم
أضف الخطوط للمفضلة بنقرة واحدة. أنشئ مجموعات مسماة ورتّب الخطوط بالسحب والإفلات. الوضع الداكن والفاتح وتتبع النظام مدعوم.
البنية التقنية
بُني بـ Next.js 16 مع TypeScript و Tailwind CSS و shadcn/ui. قاعدة بيانات PostgreSQL مع Drizzle ORM، ومصادقة عبر NextAuth.js، وتخزين ملفات عبر MinIO (متوافق مع S3). يُنشر عبر Docker Compose.
لماذا هذا مهم
Font View يوضح قدرتنا على بناء أدوات إنتاجية حقيقية — تجمع بين واجهات أنيقة وبنية تحتية سحابية متينة. من التمرير الافتراضي لآلاف العناصر إلى المزامنة الذكية — كل تفصيلة مصممة بعناية.