08 — SaaS Development

Fontara Widget.

A commercial browser widget and Chrome extension that injects a real-time typography control panel into any live website — 310+ Google Fonts, WCAG contrast checker, undo/redo, export to CSS/JSON/Tailwind/Figma tokens, and a complete SaaS backend with Stripe payments, license key management, and device fingerprinting. Built with Vite, TypeScript, Next.js 14, Prisma, and Neon PostgreSQL.

Role

Designer & Developer

Year

2026

Stack

Vite, TypeScript, Next.js 14, Prisma, Stripe, Chrome MV3

Status

Live

Live Site

Open Site ↗

GitHub

Private

What

Fontara Widget is a commercial browser typography tool — a self-contained JavaScript widget that injects into any live website and lets designers, developers, and agencies test and apply font pairings directly on their own content. Unlike a typography playground that uses dummy layouts, the widget overlays real-time controls on top of the user's actual product, so every font decision is made in context.

The widget ships as a single IIFE bundle — no framework, no dependencies — that loads via a script tag with a license key attribute, a bookmarklet, or a Chrome extension. On activation it mounts a floating control panel with six element groups (H1, H2, H3, H4–6, Body, Buttons, Nav), full typography sliders (size, line-height, letter-spacing, word-spacing), a color picker, variable font axes (stretch, italic), custom CSS selectors, and lazy-loaded font previews for 310+ Google Fonts across 6 categories. Every change is applied live via injected style tags using !important to override host page styles.

The PRO license unlocks saved named presets synced to the backend via the user's license key, and export to 5 formats: full CSS with Google Fonts @import, JSON, Tailwind config snippet, CSS custom properties, and Figma token JSON. A WCAG contrast checker evaluates text color legibility in real time. The keyboard shortcut overlay (?), undo/redo stack (50 snapshots, Ctrl+Z/Y), and draggable dock round out the interaction model.

· · · ◆ · · ·

Why

Testing typography on Lorem Ipsum on a white canvas is not the same as seeing a font on your actual navigation bar, your hero headline, your product card. The feedback loop between "I picked this font" and "I can see how it looks on my product" is broken when your tool and your product are in different tabs.

Fontara Widget closes that gap entirely. Because it injects directly into any live website, every typography decision is made on real content, in real context: the actual line lengths, the actual spacing constraints, the actual surrounding UI. The widget targets the elements already on the page — h1, p, nav a, button — and overrides them in place, so what you see in the panel is what you'll ship.

The Chrome extension removes even the script-injection step. One click injects the widget on any page. The device fingerprinting and license system allow the same key to work on up to 4 devices for commercial licenses, without storing any personally identifiable information — the fingerprint is a non-reversible FNV-1a hash of browser characteristics.

Zero-Dependency IIFE Architecture

The widget is compiled by Vite into a single IIFE (Immediately Invoked Function Expression) bundle. No React, no Vue, no external runtime — every component, state manager, and CSS rule is written in vanilla TypeScript and DOM manipulation. The final build is a single file that executes on load, creates the dock and panel via document.createElement, injects a style tag for all widget CSS using CSS custom properties for theming, and mounts the font preview lazy-loader via IntersectionObserver. This architecture means the widget runs on any page — with any framework, any bundler, any stack — without dependency conflicts or version mismatches. Vite's IIFE format with esbuild minifier keeps the output small and fast. The production build also runs through javascript-obfuscator to make reverse engineering prohibitively difficult, then prepends a copyright banner.

FNV-1a Device Fingerprinting & License Verification

License keys (format: FTPR-XXXXX-XXXXX-XXXXX-XXXXX, unambiguous 23-char alphabet) are verified against a Next.js backend. Device fingerprinting uses a lightweight FNV-1a (Fowler–Noll–Vo) 32-bit hash: the hash is seeded at 2166136261 and processes each character of the combined userAgent + language + screen resolution + timezone + platform string with XOR and a 16777619 prime multiplier. The resulting 32-bit integer is encoded to base36 and truncated to 7 characters. This is not cryptographic — it is a deterministic identifier used only to count unique devices per license and enforce the activation limit (1 for Personal, 4 for Commercial). The backend stores fingerprints in a Postgres activation table; the verify endpoint runs an atomic transaction to prevent race conditions when multiple tabs register simultaneously. License results are cached in localStorage for 24 hours with a 6-day offline grace period.

WCAG Contrast Checker & Full Typography Controls

The contrast checker computes WCAG 2.1 relative luminance for any two hex colours. Relative luminance converts RGB channels to linear light values via gamma correction (values ≤ 0.04045 divide by 12.92; values above raise to the 2.4 power after a 1/1.055 scale offset) then weights them 0.2126R + 0.7152G + 0.0722B. Contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 > L2, tested against WCAG AA (≥ 4.5:1 normal text, ≥ 3:1 large text) and AAA (≥ 7:1 normal text). Typography controls cover font size (12–96px), font weight, line-height (0.8–2.5 unitless), letter-spacing (−0.1 to 0.1em), word-spacing (−0.05 to 0.2em), font-stretch (75–125% for variable fonts), font-style (normal / italic), text-transform, and text color via an HSV picker. The undo/redo system deep-clones the full element-group state object via JSON serialization at each mutation and keeps 50 snapshots in two stacks.

Chrome Extension — Manifest V3 & OffscreenCanvas

The Chrome extension (Manifest V3) bundles the compiled widget IIFE and injects it on demand via the Scripting API. The popup checks if #fontara-dock exists on the active tab via chrome.scripting.executeScript to determine state (active / inactive) and renders the correct UI. The background service worker draws the toolbar icon at runtime using OffscreenCanvas: a rounded purple rectangle is drawn via quadratic Bezier curves on a 2D canvas context, "Fa" text is rendered in white Bold Arial, and the ImageData is passed to chrome.action.setIcon() for all four sizes (16, 32, 48, 128px). This avoids shipping pre-rendered PNG files for the icon — it is generated programmatically from the same brand colour as the widget (#7c3aed). The remove button in the popup removes #fontara-dock and #fontara-styles from the DOM, cleanly unmounting the widget without a page reload. Extension permissions: scripting, activeTab, storage.

· · · ◆ · · ·

Outcome

What shipped

A complete commercial SaaS product: the Fontara Widget IIFE bundle (310+ fonts across 6 categories — sans-serif, serif, display, handwriting, monospace, experimental; 35 curated pairings with 8 PRO-exclusive combinations; 5 export formats — CSS, JSON, Tailwind, CSS custom properties, Figma tokens; WCAG contrast checker; 50-snapshot undo/redo; draggable dock; keyboard shortcuts overlay; dark mode; variable font axes; custom CSS selectors; lazy font previews via IntersectionObserver); the Fontara PRO Next.js 14 app hosted at app.fontara.it on Vercel, backed by Neon PostgreSQL via Prisma ORM; a Stripe payment flow with two live one-time price plans (Personal €29, Commercial €89), webhook-driven license generation, and automatic license revocation on refund via charge.refunded event; Resend transactional email for license delivery; a device dashboard at /dashboard for users to manage and remove activations; the Chrome extension (Manifest V3); and an obfuscated production widget with copyright banner injected at build time.

What I learned

The most technically involved piece was the license verification architecture. A widget running on arbitrary third-party websites must verify its license key without exposing it in a way that can be trivially shared — but it also cannot do heavy cryptography client-side. The solution is a cached, fingerprinted server call: the key and device fingerprint are sent to the backend, the backend enforces the per-device limit transactionally, and the result is cached in localStorage for 24 hours with a 6-day offline grace period. This means the widget works offline while still enforcing limits for honest users. Building an entire payment-to-license pipeline — Stripe webhook → key generation → email → activation → device counting — end to end as a solo developer required deeply understanding each integration point: not just calling APIs, but handling webhook idempotency, atomic database transactions, race condition prevention, and graceful degradation when any step fails.

NEXT PROJECT

GymLog →

↗