Text Rendered to a PNG With Your Fonts and Colors
Create a PNG containing your own text, a selected font, colors and a background. Twelve font choices, six style templates, five shadow options and three background modes are available. This is a text renderer, not an AI image prompt tool. Download and Copy Image use the same completed PNG. Quote cards on a solid or diagonal-gradient background, transparent overlays to inspect over the destination background, and banner drafts for comparing text sizes and alignment are the main uses; a PNG replaces neither editable text nor vector artwork.
From Text to Download in Five Steps
- Enter your words and any intentional line breaks.
- Choose a template or configure font, available weight, size, colors, alignment and shadow. Templates reset the background to Solid.
- Select Solid, Gradient or Transparent and choose canvas dimensions. Use system sans-serif if you prefer not to download a font.
- Click Generate Image. Wait for font loading and PNG encoding, then inspect the completed canvas.
- Download PNG, or try Copy Image in a receiving app that accepts image clipboard content. Generate again after each edit.
How Fonts Load, Text Is Fitted and Defaults Behave
The selected family and weight load before canvas measurement (FontFaceSet.load). The font comes from Google Fonts (fonts.googleapis.com), so your browser contacts Google when it loads (Google Fonts CSS2); the stylesheet request names the family and weight, not your text, and the browser then downloads the font files it needs. The system-font option bypasses that download. Physical line breaks and empty lines are retained; long lines wrap at ordinary spaces where possible, and long words split at whole grapheme boundaries. Tabs are rejected with a correction message. Source CR and CRLF act as line breaks, not literal pixels.
Canvas text metrics (measureText) determine line positions and vertical fit. Glyph ink and a conservative shadow margin are checked before painting; content that does not fit produces an error instead of a clipped downloadable result. These calculations do not certify every font, script or blur edge. Font glyphs can still fall back individually, so inspect the actual image.
The defaults and their effects:
- Default canvas: 800 by 400 pixels.
- Default font: Inter, weight 700, size 48 pixels.
- Default colors: text #0f766e on solid #ffffff.
- Input A, blank line, B: the blank physical line remains between A and B.
- Changing a setting after Generate: the previous image and export are invalidated, so Generate again.
When Text Does Not Fit, and What Is Limited
If text does not fit, reduce size, shorten it or increase the canvas height/width. The tool does not silently shrink or crop it. Correct invalid six-digit hex colors. Font loading failures can be retried with Generate, another family, or the explicit system-font option. Empty or unsupported text has no export. Clear removes the text, PNG and feedback while retaining style controls.
The PNG is encoded from the canvas (toBlob). Copy Image can fail because of browser capabilities, permissions or the destination. Use Download PNG instead. A download request is not confirmation that a file was saved. Settings changes and Clear invalidate pending generation/copy feedback, so an old result cannot become the current preview.
Use short text and choose contrast for the actual destination. Transparent pixels make the receiver background part of readability. Maximum canvas size is 1920 by 1080 pixels; increasing print resolution later cannot create missing detail. Limits are 4,000 UTF-16 units, 1,000 grapheme clusters and 100 physical lines. Preserve the original words as a caption or text alternative when publishing an image. Review the chosen font license and any rights in the content for your intended use.
Pixel rendering, fonts, actual saved files and receiving-app clipboard behavior require browser verification.