Use Puppeteer’s fullPage: true option to capture the entire rendered page, and await document.fonts.ready before taking the screenshot. That waits for the document’s font-loading and layout work to settle; it does not prove that the intended typeface loaded or that it contains every Hindi glyph, so inspect the image when accurate rendering matters.
How to take a full-page screenshot with Puppeteer
Puppeteer’s screenshot options document fullPage for capturing beyond the current viewport; its default is false. The example below waits for network activity to quiet, waits for fonts, then saves a PNG.
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: 'networkidle0' });
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}Save this as an ES module (for example, screenshot.mjs) in a project where Puppeteer is installed, then run it with Node.js. Replace the example URL with the page you want to capture. The finally block closes Chrome even if navigation or capture fails.
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 →Clear out junk files and repair common Windows errorsFree Scan →Choose a navigation wait that suits the site
networkidle0 is an example, not a guarantee that all application content is ready. Some pages keep requests open; others insert content after navigation. If network idleness is unsuitable, use a different navigation condition and wait for a page-specific readiness signal before capturing:
#1 Best Overall
await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.waitForSelector('#article-ready');
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'full-page.png', fullPage: true });Replace #article-ready with a selector that appears only when the page has inserted the content you need. If the site exposes an application-specific ready signal, use that instead. Font readiness should come after the page’s Hindi text is present, so any fonts needed for that text have had a chance to load.
How to wait for web fonts before a Puppeteer screenshot
Run await page.evaluate(() => document.fonts.ready) after navigation and after relevant page content has appeared. The browser’s FontFaceSet.ready promise resolves when the document has completed loading fonts, layout operations are complete, and no further font loads are needed, according to MDN’s FontFaceSet reference.
This is a timing check, not a visual-quality check. It does not establish that a particular font family succeeded, covers Devanagari characters, or matches the site’s intended appearance. A fulfilled promise can coexist with fallback glyphs if the requested font or glyphs are unavailable.
Recommended Free Tools
Check readiness and rendering separately
You can record the browser’s font-set status as a diagnostic, but still inspect the output image:
await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.waitForSelector('#article-ready');
await page.evaluate(() => document.fonts.ready);
const fontStatus = await page.evaluate(() => document.fonts.status);
console.log({ fontStatus });
await page.screenshot({ path: 'full-page.png', fullPage: true });Look for missing characters, inconsistent fallback shapes, and unexpected line wrapping. If the screenshot differs from normal browsing, inspect the page’s CSS font-family declarations and font requests in browser developer tools. No single Hindi font can be assumed correct for every site or runtime.
Hindi text loaded late or below the fold
If an application inserts Hindi text asynchronously, waiting immediately after navigation may be too early: the text may trigger additional font loads later. Wait for the content or the site’s ready signal first, then await document.fonts.ready.
For pages with lazy-loaded sections, trigger the loading behavior for sections you want included before capturing. Then wait for those sections and their fonts to settle again. The exact scrolling or interaction required is site-specific; Puppeteer’s full-page option does not by itself guarantee that every application-level lazy-loading behavior has run.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Image screenshot or PDF?
| Output | Use | Important behavior |
|---|---|---|
| Image | page.screenshot() for a raster image such as PNG. |
fullPage: true captures beyond the viewport. PNG is the documented default image type. |
page.pdf() when you need a document rather than a raster image. |
PDF generation uses print media by default. To use screen styles, call page.emulateMediaType('screen') before page.pdf(). |
These are separate output paths in Puppeteer’s screenshot options and PDF method documentation. A PDF’s print styling can change layout and typography compared with an on-screen screenshot.
Best Value
Full-page capture edge cases
A full-page image is not simply a record of one browser viewport. For exceptionally long pages, check the resulting image dimensions and inspect the visual output. Pages with sticky or fixed elements can also warrant inspection because their appearance across an expanded capture may not match what you expect from ordinary scrolling. Puppeteer documents the full-page option, but that alone does not define the outcome for every unusual page layout.
Troubleshooting Hindi font and capture problems
- Hindi characters are missing or appear as boxes: font readiness alone cannot confirm glyph coverage. Inspect the font requests and CSS font stack, then check whether the intended face supports the characters shown.
- Text wraps differently from normal browsing: confirm that the relevant content appeared before the font wait, and inspect whether the expected web font loaded successfully. A fallback face can change line breaks.
- The screenshot omits content added after navigation: wait for a selector or application-specific ready signal before awaiting fonts and capturing.
- Lazy-loaded sections are absent: trigger the site’s lazy-loading behavior for the sections you need, then wait for the resulting content and fonts.
- Navigation never reaches the chosen wait condition: a page may keep network activity open. Use a more suitable navigation condition and an explicit page-ready signal rather than treating network idleness as mandatory.
- The PDF looks unlike the screenshot:
page.pdf()uses print media by default. Emulate screen media first if screen styles are needed.
Or skip the browser setup
For a one-call screenshot without managing a local browser, ScreenshotNeo accepts a URL and returns an image or PDF. See the ScreenshotNeo API documentation for parameters and options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides screenshot tools for AI agents, including Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots.
Sign up free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Does document.fonts.ready confirm that the Hindi font rendered correctly?
No. It signals that font loading and related layout work have settled; it does not verify a particular face, Devanagari glyph coverage, or visual fidelity.
Should I use page.screenshot() or page.pdf() for a full-page image?
Use page.screenshot({ fullPage: true }) for a raster image. page.pdf() creates a PDF and uses print media by default.
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.
