Wait for the page’s target text to appear, then wait for the browser’s used fonts and layout to settle before calling page.screenshot(). If the exact font matters, explicitly request the intended face with document.fonts.load() and verify it loaded: document.fonts.ready alone does not prove the preferred font succeeded.
Capture the page after its text and fonts are ready
This Puppeteer workflow waits for the document to be parsed, confirms that the content you intend to capture is visible, waits for used fonts, and then saves a full-page PNG. Replace the example URL and selector with those for your page.
As an Amazon Associate I earn from qualifying purchases.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
// Use a selector that identifies the actual content to capture.
await page.waitForSelector('[data-screenshot-content]', { visible: true });
// Wait for fonts currently used in the document and associated layout work.
await page.evaluate(async () => {
await document.fonts.ready;
});
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}Puppeteer’s documentation covers navigation, page waits, and screenshot options. The Page API documents page.screenshot() and related methods. Navigation readiness and screenshot capture are separate: a page can reach DOMContentLoaded before client-rendered language content is present.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteRequest a specific script font when it is essential
If the capture must use a particular face, request it after the target content has appeared and before taking the screenshot. Use the exact CSS family name and weight configured for the page, and pass representative text so the browser can check the face for those characters.
#1 Best Overall
await page.evaluate(async () => {
const sample = document.querySelector('[data-screenshot-content]')?.textContent ?? '';
await document.fonts.load('400 16px "Noto Sans Devanagari"', sample);
await document.fonts.ready;
});
await page.screenshot({ path: 'page.png', fullPage: true });This example is for Devanagari only, and only when that family is configured by the page. Substitute the correct script family, CSS weight, and sample text for your content. Check that the font request succeeded and inspect the rendered output when fidelity matters. A fulfilled promise is not, by itself, confirmation that the preferred face was used. See MDN’s Document.fonts reference for the browser API.
Choose a font stack for the language and scripts on the page
“Indian-language” does not identify one script or one font. Choose families for the actual languages and scripts in the captured content, as well as the weights, punctuation, digits, and symbols it needs. Noto recommends selecting script-specific families for the languages a site uses rather than loading its entire collection; its web-font guidance gives examples for Devanagari and Tamil.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
body {
font-family: "Noto Sans Devanagari", "Noto Sans", sans-serif;
}For Tamil, use the corresponding Tamil family. A page containing multiple scripts may need a stack that covers each one; choose and verify it against the real text rather than assuming one family covers every glyph. Noto’s guidance also describes adding selected families through Google Fonts or using family names in CSS.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesFor a self-hosted font, check that the @font-face family name and weight match the CSS request and that the font file is reachable from the browser runtime taking the screenshot. If the requested face is unavailable, its request fails, or it lacks required glyphs, the browser may render fallback glyphs instead. Inspect the font status and network activity rather than diagnosing the cause from the image alone.
Rank #3
Understand what font readiness guarantees
The browser’s document.fonts exposes a FontFaceSet. Its ready promise resolves after loading and layout operations for fonts used in the document have completed. It does not necessarily load every declared font: a face that is not used may remain unloaded, and font-display behavior can affect whether a face is used.
- Wait for the page-specific element or text containing the language content.
- Await
document.fonts.readyso used-font loading and related layout work can finish. - If a particular face is required, call
document.fonts.load()with its intended CSS font shorthand and representative text; inspect the result and confirm the request succeeded. - Take the screenshot after those checks, then inspect it if exact glyph appearance matters.
A navigation milestone such as load or DOMContentLoaded is not proof that asynchronously rendered text exists or that the intended font was selected. Network idle can be useful on some pages, but it is not a semantic check for either condition. MDN explains the readiness behavior in its FontFaceSet reference.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Adapt the capture to the page
- Asynchronous content: Wait for the selector, text, or other page-specific condition that confirms the content is ready. The sample selector is illustrative, not a universal one.
- Several scripts: Ensure the chosen families and fallbacks cover all scripts in the captured region, not just its first language.
- Weights and symbols: Match the CSS weight in
document.fonts.load()to the face used by the page, and test relevant punctuation, digits, and symbols as well as letters. - Runtime differences: Check font file access and rendering in the same browser/container environment used for the capture; local developer output does not establish identical rendering elsewhere.
Exact glyph coverage, shaping, and pixel-identical output depend on the selected font and runtime. Validate the actual page and browser environment when those details are important.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Troubleshoot missing or incorrect glyphs
- The screenshot shows fallback glyphs: Confirm the page’s CSS family name and weight, then check whether the corresponding font request succeeded. Verify that the font has the required glyphs for the text.
- Text is missing from the capture: The page may render it asynchronously. Wait for the target content itself before waiting for fonts; font readiness does not wait for application-specific content to appear.
- The font-ready wait completes but the preferred face is not visible: A resolved
document.fonts.readymeans used-font loading and layout work completed, not that a specific preferred face loaded. Explicitly request the face withdocument.fonts.load()and inspect the result and network request. - The problem appears only in CI or a container: Check font-file reachability and font loading in that capture runtime. Validate its output directly rather than assuming the local browser and deployed runtime behave identically.
Or skip the browser setup
ScreenshotNeo can capture a URL through one GET request. Its API accepts an output format such as PNG, JPEG, or WebP, or can return a PDF. Example with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Before capture, it accepts the cookie or consent banner as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
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.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
