Embed Shopifont on your site

Copy-paste snippet

Paste this where you want the generator to appear. The default 900px height fits the full UI without inner scrolling on most desktop and tablet widths; the embed stacks vertically below ~960px for mobile.

<iframe
  src="https://shopifont.app/embed"
  width="100%"
  height="900"
  frameborder="0"
  loading="lazy"
  title="Shopify Custom Font Generator by Shopifont"
  style="border:1px solid #e5e5e5; border-radius:8px;"
></iframe>

Live preview

This is exactly what your visitors will see — the same interactive generator, with our nav and ad slots removed.

Why partners embed it

• Zero CSS collision

  The embed is a same-origin iframe, fully isolated. Nothing leaks into your stylesheet.

• No tracking on host page

  Mediavine, Clarity, and our session-recording stack stay on the homepage. Only privacy-safe Plausible loads inside the embed.

• Always up to date

  When we ship a new theme or fix a generator bug, your embed gets it on the next visitor refresh — no version pinning to maintain.

• Free attribution backlink

  The header links back to shopifont.app with a utm_source=embed tag, so visitors who like the tool can find us — and we can credit your traffic.

Frequently asked questions

• Does the embed cost anything?

  No. Shopifont is free to use and free to embed. The iframe is the same generator you'd see at the homepage — share-config and Mediavine ads are suppressed inside the embed so the partner site stays clean.

• What does the embed weigh?

  About 140 KB of JS on first load (the same shared chunks the homepage uses, served from Vercel's edge). The page is fully static, prerendered at build time, and lazy-loaded by the parent iframe so it only fetches when the user scrolls to it.

• Will it work on a Shopify blog post?

  Yes. Shopify's blog editor supports iframes via the rich text editor's HTML mode. WordPress, Webflow, Notion, Ghost, and Substack all permit iframes too. The embed has no auth, no cookies, and no tracking that talks back to the host page.

• How do I size the embed?

  Set the iframe to 100% width with a fixed height (we recommend 900px on desktop). The generator stacks vertically below ~960px so the whole UI fits on mobile screens without scrolling inside the iframe.

• Can I get analytics on how many people use the embed?

  Plausible loads inside the embed and counts pageviews — drop us a line at hello@shopifont.app with your domain and we'll share which sites are sending the most traffic. The "Open full version" link in the embed header carries a utm_source=embed parameter so we can attribute clickthroughs from the embed back to the partner site.

• Is there a script-tag widget instead of an iframe?

  Not yet. The iframe is faster to ship and zero-risk for CSS collisions on the host page. If iframe embeds get traction, a script-tag widget that mounts inside a Shadow DOM is on the roadmap. Email hello@shopifont.app if you'd be a partner for that.