Hey Product Hunt 👋 Every Shopify store I touched had the same broken pattern: a "premium" theme stuck with a generic system font, or — worse — a custom font jammed in via a Liquid hack that flashed unstyled text on every page load and tanked Core Web Vitals. The fix is technically trivial (preload, font-display, CSS variables, theme settings) and yet nobody had packaged it for non-devs. So I did. Shopifont takes a font file or Google Font URL and gives you three things you paste straight into your theme: 1. @font-face CSS with font-display: swap + preload hints → zero CLS 2. settings_schema.json blocks so merchants can swap fonts from the theme editor (no Liquid edits, no re-deploy) 3. CSS variable overrides scoped to your theme's existing tokens — no orphan styles, no specificity wars What changed during the build: I started with a CLI. Killed it on day three. Merchants don't want a CLI — they want output that works on the first paste. The whole tool is now browser-only. Paste font, get code, ship. Free. No signup. No upsell wall. Two questions for the room — I'll be in the comments all day: • Theme devs: what's the worst typography hack you've seen in a "premium" Shopify theme? • Merchants: has bad font loading ever shown up red in your CWV / Lighthouse reports?

Shopifont

Custom fonts on any Shopify theme. Zero CLS, zero CLI.

Custom fonts on any Shopify theme. Zero CLS, zero CLI.