Developer docs

FontPreview has two parts: drop-in widgets for your pages, and the render API they're built on. Widgets and the render API live at https://render.fontpreview.app; the account API used by the dashboard lives at https://api.fontpreview.app.

Quickstart

1. 1
   Create an account

   Sign up and confirm your email address.
2. 2
   Upload a font

   In Fonts → Upload, add TTF, OTF or WOFF files (up to 10 MB each). Each font gets an ID like fnt_….
3. 3
   Create a widget key

   In API Keys, create a widget key and add your site's origin, e.g. https://shop.example.com. Copy the key when it's shown; it is displayed once.
4. 4
   Create a widget and embed it

   In Widgets, create a widget, then copy its embed code. Paste your widget key into data-key and put the snippet on your page.
5. 5
   Check it renders

   Open the page on the origin you listed. If nothing appears, the browser console shows the error (most often an origin that isn't on the key).

<div id="font-tester"></div>
<script src="https://render.fontpreview.app/v1/tester.js"
        data-key="fp_widget_…"
        data-widget-id="wgt_…"
        data-container="#font-tester"
        defer></script>

API keys

There are two kinds of key. Use the right one for where it runs.

Keys are shown once when created and stored only as a hash, so we can't show them again. If you lose one, revoke it and create a new one. Send keys in the X-API-Key header (or the api_key query parameter for image URLs in HTML).

Origins are matched exactly on scheme, host and port: https://example.com does not cover https://www.example.com, so add both if you use both. Wildcards aren't supported. Allowed origins per key: Free 1, Starter 5, Pro unlimited, Enterprise unlimited.

Widgets

Each widget is a script at https://render.fontpreview.app/v1/<name>.js that renders inside a Shadow DOM, so your CSS and the widget's can't affect each other. Settings come from data-* attributes. With data-widget-id, the widget loads the configuration saved in the dashboard. Colours are 6-digit hex without #.

Script-tag embed

One widget per script tag, pointed at a container. Best for plain HTML and CMS embeds (see the quickstart snippet above).

Element embed

For single-page apps or several widgets on one page, put the settings on the container and load the bundle once. Call window.FontPreview.init() after adding containers dynamically; it only mounts containers that aren't mounted yet.

<div data-fp-widget="tester" data-key="fp_widget_…" data-font="fnt_a"></div>
<div data-fp-widget="tester" data-key="fp_widget_…" data-font="fnt_b"></div>
<script src="https://render.fontpreview.app/v1/tester.js" async></script>

Attributes for every widget

Widgets dispatch DOM events on the container element (bubbling): fontpreview:select from the picker and fontpreview:add-to-cart from the customizer.

Render API

GET https://render.fontpreview.app/v1/render/{fontId}?text=…

Returns image/png or image/webp. Responses carry Cache-Control: public, max-age=3600 and X-Render-Cache: HIT|MISS. Only misses count toward your monthly render allowance. Your watermark is applied server-side according to your plan and settings; it can't be changed with a query parameter.

curl "https://render.fontpreview.app/v1/render/fnt_…?text=Hello%20world&size=72&color=1c2140&dpr=2" \
  -H "X-API-Key: fp_live_…" \
  -o hello.png

Signed URLs

To put a render in an <img> tag without exposing any key, mint a short-lived signed URL from your server with a live key. The signature covers the font and every parameter, so the URL can't be edited to render different text.

curl -X POST "https://api.fontpreview.app/render-tokens" \
  -H "X-API-Key: fp_live_…" -H "Content-Type: application/json" \
  -d '{"fontId":"fnt_…","text":"Hello","size":64,"expiresIn":300}'

# → {"data":{"url":"https://render.fontpreview.app/v1/render/fnt_…?…&sig=…","exp":1767225600}}

The body takes the same options as the render API in camelCase (lineHeight, strokeWidth) plus expiresIn (30–3600 seconds, default 300). Widget keys can't mint signed URLs.

Errors

Errors are JSON with a stable code:

{ "error": { "code": "RATE_LIMITED", "message": "…", "details": { "retryAfter": 12 } } }

Rate limits

Requests are limited per minute by plan. Every response carries X-RateLimit-Remaining and X-RateLimit-Reset (Unix seconds); a 429 also carries Retry-After.