Let people try your fonts without handing them over.
FontPreview sets your type on our servers and sends back an image. Shoppers type their own words, change the size and compare styles. The font file stays in private storage.
Free plan: 5 fonts and 5,000 previews a month. No card needed.
The browser receives a PNG. Move the loupe over it: pixels all the way down, no outlines to extract.
A webfont preview is the font.
To show a typeface with CSS, the browser has to download it. Any visitor can open the network tab, save the file and install it. Subsetting and obfuscation slow that down by a minute or two.
Foundries and font shops end up choosing between a weak preview (a few fixed images) and giving the product away. FontPreview removes that choice: the preview is live, and the only thing that travels is an image of the visitor's text.
| Name | Type | Size |
|---|---|---|
| Ragtime-Bold.woff2 | font | 48.2 kB |
| render/fnt_ragtime?text=Hello | png | 6.1 kB |
How it works
- 1
Upload your fonts
Add TTF, OTF or WOFF files in the dashboard. They're validated and stored privately; nothing is published.
- 2
Embed a widget
Pick a widget, copy the snippet onto your site, and lock its key to your domain.
- 3
Visitors get images
Each keystroke asks our render service for a PNG with your watermark. Repeat requests come from the edge cache.
Eight ways to show a typeface
Each widget is one script tag, isolated in Shadow DOM so it won't clash with your theme's CSS. Configure it in the dashboard or with data attributes.
- Tester
- A text box and size slider. Visitors type and see their words set in your font.
- Badge
- A small static sample image for product cards and listings.
- Picker
- Compare several fonts with the same text, in a list or grid, with optional search.
- Specimen
- A full specimen page: tester, waterfall, paragraph and character set.
- Waterfall
- One line of text repeated at descending sizes.
- Paragraph
- A heading and body copy, for showing how two fonts pair.
- Customizer
- Visitors place their own text on a product photo (mugs, signs, shirts) before buying.
- Gallery
- Every weight and style of a family, labelled and sorted.
Three lines of HTML
Paste a container and a script. The dashboard fills in your widget ID and works on any platform that accepts custom HTML.
<div id="font-tester"></div>
<script src="https://render.fontpreview.app/v1/tester.js" data-key="fp_widget_…"
data-font="fnt_…" data-container="#font-tester" defer></script>Or call the API
Every widget is built on one public endpoint. Request an image with your text, size, colours and OpenType features, or mint short-lived signed URLs from your server.
curl "https://render.fontpreview.app/v1/render/fnt_…?text=Ragtime&size=96&format=webp" \
-H "X-API-Key: fp_live_…" -o ragtime.webpStart free, pay as you grow
Compare all plans- 5k rendered previews / month
- 5 fonts, 50 MB storage
- Tester + Badge
- FontPreview watermark
- 100k rendered previews / month
- 50 fonts, 500 MB storage
- All 8 widgets
- FontPreview watermark, Your own text
- 1M rendered previews / month
- 500 fonts, 5 GB storage
- All 8 widgets
- FontPreview watermark, Your own text, No watermark
Questions
Can someone still screenshot the preview?
Yes, and that's fine: a screenshot is a picture of some words at one size. It can't be installed, it has no outlines or kerning, and it carries your watermark unless your plan removes it. What a webfont leaks is the whole font.
Which font formats can I upload?
TTF, OTF and WOFF, up to 10 MB per file. (WOFF2 isn't supported yet; convert it to TTF or OTF first.) Single-line (stroke) fonts for engraving and plotting are detected and rendered with a stroke.
Do I need a developer?
No. Create a widget in the dashboard and paste the snippet into your site's HTML, Shopify theme, WordPress block, Webflow or Squarespace embed. Developers can call the render API directly instead.
Where are my fonts stored?
In private object storage on Cloudflare R2. There is no public URL for a font file, and the render service only ever returns images.
What stops another site from using my widget key?
Widget keys only work from the website addresses (origins) you list on the key. Requests from anywhere else are refused.
What happens if I go over my plan?
Only fresh renders count toward your monthly allowance; repeat requests served from the cache don't. The dashboard warns you at 80% and 95%, and new renders pause once the allowance is used until the next month or an upgrade.
Put a live tester on your product page this afternoon.
Create a free account