Banner Studio

Design Precision

Google Fonts library, custom font upload, pixel grid, snap-to-grid, smart guides, and six-direction layer alignment tools.

01

Google Fonts Library

Access 120+ curated Google Fonts directly in the editor. Fonts load on-demand via a link tag so only the fonts you actually use are included in the published banner. Search by name or browse by category (sans-serif, serif, display, monospace). Recent fonts are tracked so your favourites appear at the top. Published banners include the Google Fonts link tag so text renders correctly everywhere.

02

Custom Font Upload

Upload WOFF2, WOFF, TTF, or OTF font files for brands that use proprietary typefaces. Uploaded fonts are stored on R2 and injected into the editor and published HTML via @font-face rules. The font picker shows a Custom tab with all uploaded fonts alongside the Google Fonts library. URL validation prevents injection of malicious font sources.

03

Grid & Snap

Toggle a pixel grid overlay on the artboard with configurable size (8px, 10px, 16px, etc.). When snap-to-grid is enabled, layer positions and sizes round to the nearest grid increment during drag operations. This ensures precise alignment without manual coordinate entry — essential for banner production where pixel-level accuracy matters.

04

Smart Guides & Alignment

As you drag a layer, magenta guide lines appear when it aligns with artboard edges, artboard centre, or other layer edges. Smart guides snap at configurable thresholds so you get alignment assistance without fighting the cursor. Six-direction alignment buttons (left, centre, right, top, middle, bottom) align selected layers to the artboard. Distribute and match-size operations help create evenly spaced, consistently sized element groups.

Ready to see it in action?

Get Started