Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Thai text that disappears, stacks incorrectly, shifts, or gains odd spacing in an html2canvas screenshot usually points to a font or rendering mismatch: the intended Thai-capable font may not have loaded, may not be available to the canvas renderer yet, or may be missing from html2canvas’s cloned document. Explicitly select a font that contains the Thai glyphs you need, wait for it with the Font Loading API, then check the cloned styles and font requests if the result is still wrong.
Why Thai text can look different in an html2canvas screenshot
html2canvas does not take a photograph of the browser window. It reads the page and reconstructs a rendering, including text painted through the canvas API. It builds a CSS font string, assigns it to the canvas context, and calls fillText. That means the active font and its metrics at capture time affect the bitmap. See the canvas renderer implementation.
Thai rendering problems therefore tend to fall into four related causes:
- Fallback font: the computed font stack does not select the intended face, or the selected face does not contain the necessary Thai glyphs.
- Font-loading race: capture begins before the web font has loaded and the browser has completed layout with it.
- Clone styling: html2canvas’s cloned document does not retain the font declaration that produced the expected DOM rendering.
- Failed resource or unsupported CSS: the font request fails, is blocked by origin rules, or a CSS property affecting layout is not reproduced as expected.
A page can look acceptable in the live DOM while the screenshot differs, because the browser may use a fallback face or different metrics in one rendering path. Diagnose the font and clone before changing Thai text or adding arbitrary spacing.
#1 Best Overall
Set an explicit Thai-capable font and wait for it
Use a font file that actually includes the Thai characters in your content. The example below assumes a WOFF2 file is served from the same origin as the page; change the path and family name to match your application.
@font-face {
font-family: "ThaiCapture";
src: url("/fonts/thai-capture.woff2") format("woff2");
font-display: block;
}
.capture {
font-family: "ThaiCapture", sans-serif;
}Then request the font for a representative Thai sample and await the document’s font set immediately before capture:
const target = document.querySelector(".capture");
const sample = "ภาษาไทย กำ เก้า";
if (!target) {
throw new Error("Could not find .capture element");
}
await document.fonts.load('16px "ThaiCapture"', sample);
await document.fonts.ready;
const canvas = await html2canvas(target, {
onError: (error) => console.error("html2canvas resource failed", error)
});
document.body.appendChild(canvas);document.fonts.load() asks the browser to load the requested font; its optional text argument can narrow font selection by Unicode range. It does not prove that every requested glyph is present in the face. Test representative Thai syllables, tone marks, and any Latin or numeric text that appears alongside Thai. MDN’s FontFaceSet.load() reference documents the method.
Rank #2
document.fonts.ready resolves after the document’s fonts have loaded, layout operations are complete, and no further font loads are needed. Awaiting it avoids capturing during the common font-loading race, but it cannot make a missing glyph appear or repair a failed font request. See MDN’s FontFaceSet.ready reference.
Recommended Free Tools
Why an arbitrary delay is weaker
A fixed setTimeout may happen to work on a fast connection and fail on a slower one, or wait longer than necessary. Waiting on the font set ties capture to the browser’s font-loading state. If the font is loaded dynamically, call document.fonts.load() for the intended family and sample, then await document.fonts.ready just before calling html2canvas.
Check that the browser selected the right font
- Open the target page in DevTools and select the element containing the Thai text.
- Inspect the computed
font-familyand, where available, the rendered-font or font-coverage view. Confirm the actual selected face contains the Thai code points used by your content. - Inspect the WOFF or WOFF2 request in the Network panel. Confirm it succeeds and that the response is valid for a font file.
- Test a short string containing Thai consonants, a vowel combination, tone marks, and mixed Thai/Latin text. Compare the live element and captured bitmap.
Do not rely only on the CSS declaration: a font name in the computed stack does not establish that the font file loaded successfully or includes every glyph. A fallback face may render a readable page but use different glyph widths and baselines in the capture.
Rank #3
Verify styles in html2canvas’s cloned document
html2canvas creates a cloned document to render. If the clone drops or overrides the font-family declaration, make the intended family explicit for the target through the configuration’s onCopyProperty hook. Consult the html2canvas configuration reference for the hook’s supported signature and options; the hook is version-sensitive, so follow the API documented for the version installed in your project.
Use the hook only after confirming the live element’s font is correct and loaded. Forcing a declaration in the clone will not fix a missing font file, incorrect family name, or absent Thai glyphs. The configuration reference also documents resource-related diagnostics such as isResourceSameOrigin and onError; use those to investigate failures rather than silently substituting an unrelated font.
Check font requests, origin rules, and resource failures
- Confirm the font URL is correct and the server returns the intended WOFF/WOFF2 file with an appropriate font content type.
- Check browser console and network errors for blocked or failed font loads, including cross-origin restrictions.
- If the font is served from another origin, configure that origin’s response and access policy correctly, or serve/proxy the font from an allowed origin.
- Log html2canvas resource errors with its documented
onErroroption and compare them with the browser’s network log.
When a font request is blocked or fails, the browser may render using a fallback, changing text metrics without an obvious error in the final bitmap. Fix the request or origin arrangement; do not mask the problem by applying a visually unrelated font.
Rank #4
Reduce the page to a minimal reproduction
html2canvas documents an important limitation in its FAQ: “Every CSS property must be manually implemented to render correctly.” Complex layouts or unsupported CSS can change text placement or appearance independently of font loading.
Create a small test page containing only the Thai sample, the font-face declaration, and the layout properties needed to position it. If that works, add the original page’s styles back in groups until the difference returns. If the minimal case still differs, record the html2canvas version, browser and version, font file, and exact text sample when reporting the issue. This separates font loading problems from CSS coverage or browser-specific behavior.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is a clean screenshot rather than debugging a client-side html2canvas rendering path, ScreenshotNeo offers a website screenshot API and MCP server for developers. A one-call request takes a URL and returns an image or PDF; it does not require you to configure font-loading waits in your own browser page.
Best Value
For example, this cURL request saves a WebP screenshot of the target URL. Replace the example URL with the page you need and use your API key:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options and response details.
- Cookie banners are accepted and 60+ known consent platforms, newsletter popups, and chat widgets are removed before capture; each step can be turned off.
- Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for Claude, Cursor, and other MCP clients. - The free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000 shots. Every feature is on every plan.
Sign up for ScreenshotNeo’s free plan and get 1,000 screenshots a month with no card.
Troubleshooting by symptom
| Symptom | Likely cause | What to check or change |
|---|---|---|
| Thai characters are missing or replaced | The selected face lacks Thai glyphs, or its request failed. | Check the rendered font and font coverage, then verify the WOFF/WOFF2 request and origin policy. |
| Text is readable but spacing or alignment changes | Capture started before the intended font was ready, or the clone used different styles. | Await document.fonts.load() and document.fonts.ready; inspect cloned font declarations. |
| The page looks correct but the screenshot does not | The cloned document or a CSS property differs from the live rendering. | Use the documented clone hook where needed, then reduce the page to a minimal CSS reproduction. |
| Only some Thai marks or mixed text look wrong | The face may not cover all code points, or font selection differs for part of the text. | Test representative syllables, tone marks, and Latin text; verify coverage of the actual characters. |
| Results vary by browser | Browser font selection, canvas text painting, or CSS support may differ. | Compare the same minimal case and record browser/version, html2canvas version, font file, and text. |
FAQ
Does awaiting document.fonts.ready guarantee every Thai character will render?
No. It signals that required font loading and layout have settled, but does not certify glyph coverage. Verify the actual font includes the Thai characters used.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchShould I change html2canvas options to fix every Thai text issue?
No single option addresses missing glyphs, failed font requests, clone styling, and CSS coverage alike. Identify which of those conditions applies before changing configuration.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
