Interactive in-browser typography tool engineered and shipped directly on Webflow’s official domain in collaboration with Ebda Agency.

Role: Lead Frontend & Custom Code Engineer (Figma → Production)

Collaborator: Ebda Agency & Webflow Internal Team

Tools / Skills: Webflow, JavaScript, TypeScript, Interactive Web Apps, Figma-to-Webflow, Performance Optimization

Live Link: webflow.com/tools/free-font-generator

As part of Webflow’s official community tooling suite, I collaborated with Ebda Agency to engineer the Free Font Generator - an interactive web application hosted directly on webflow.com.

The objective was to build an intuitive, zero-latency typography playground where designers and creators can input custom copy, test hundreds of stylistic Unicode font variations, filter across categories (Gothic, Cursive, Glitch, Zalgo, Symbolic), and copy formatted text to clipboard or push directly into Webflow projects.

Real-Time Unicode Mapping: Implemented high-performance algorithmic character mapping in vanilla TypeScript/JavaScript. As the user types into the input field, hundreds of complex glyph variations are calculated and rendered in the DOM with sub-16ms response times (60 FPS).

Category Filtering System: Built a custom instant-filtering state machine allowing users to toggle between font styles (All, Cool, Fancy, Cursive, Small, Glitch, Zalgo, Gothic) without reloading or lagging the main thread.

Deploying code directly onto webflow.com requires adhering to strict internal engineering standards:

Zero Script Bloat: Wrote pure, modular code with zero external library dependencies, passing Webflow’s internal security audits and performance budgets.

CSS & DOM Isolation: Ensured all interactive customizer components, modal states, and tooltip actions live in strict scoping without polluting Webflow’s global CSS architecture.

Seamless Clipboard Flow: Integrated modern asynchronous Clipboard API methods with instant visual toast notifications, enabling users to copy styled text in a single click.

Deep Webflow Integration: Wired the "Try on Webflow" contextual action, funneling creators directly into the Webflow Designer workspace.

Used by Thousands Daily: Operating at scale on Webflow’s primary enterprise infrastructure.

Flawless Lighthouse & CWV: 100/100 Core Web Vitals with instant First Contentful Paint (FCP) and zero Interaction to Next Paint (INP) overhead.