Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsIn Playwright or Puppeteer, wait for the page content you need, then await document.fonts.ready in the page before taking the screenshot. This gives the browser a chance to finish work associated with fonts used on the page. If exact typography matters, also verify the intended font on the specific content you are capturing: readiness alone does not prove that every declared font loaded or that the preferred face rendered.
Wait for fonts before taking the screenshot
Navigation completion and font readiness are separate concerns. A page can reach a navigation milestone while the fonts that affect its appearance are still loading. The practical sequence is: navigate, wait for the relevant page content, await document.fonts.ready in the page context, and then capture. Treat the font wait as synchronization, not as a universal test that the intended typeface successfully rendered.
As an Amazon Associate I earn from qualifying purchases.
Playwright: runnable Node.js example
This example captures the full scrollable page. Install Playwright in your project and install the browser it will use according to the Playwright Page API documentation.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.locator('main').waitFor();
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
await browser.close();
}
})();Replace the URL and the main selector with the page and content marker that fit your target. If the page does not have a main element, wait for another reliable selector or omit that content-specific wait. Network idleness can help determine when navigation activity has settled, but it does not replace the explicit font readiness wait.
Puppeteer: runnable Node.js example
Puppeteer’s screenshots guide demonstrates navigation with waitUntil: 'networkidle2' followed by a screenshot. Add the font wait between navigation and capture:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.waitForSelector('main');
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
await browser.close();
}
})();Use the page or element screenshot method that suits your target. Puppeteer documents both Page.screenshot() and element screenshots through ElementHandle.screenshot() in its screenshots guide.
Verify typography when the exact font matters
document.fonts.ready is useful when a screenshot should wait for font-related loading and layout work to settle, but it is not proof that the exact preferred font face succeeded. A page may declare multiple families or weights, use fallbacks, or apply fonts only to particular content.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →- Check the expected family, weight, and style for the text you care about using a page-specific method.
- Inspect the rendered target when visual fidelity is the requirement; compare its typography with an expected result rather than assuming a successful wait proves the right face was used.
- Keep the verification specific to the page. There is no universal check established here that proves the preferred font rendered correctly on every site.
Choose viewport, full-page, or element capture
Wait for fonts before whichever capture operation you use. Playwright supports viewport screenshots and full-page capture with fullPage: true; its Page API documents screenshot options including output path, image type, scale, and timeout. Puppeteer supports page and element screenshots. The right choice depends on what the capture needs to show, not on font readiness.
- Viewport: captures the currently visible browser area; use it when the intended output is a screen-sized view.
- Full page: in Playwright, set
fullPage: trueto capture the full scrollable page. For either framework, check that below-the-fold content and lazy-loaded images have appeared before capture if they matter. - Element: capture a specific component when the page contains unrelated content. Puppeteer documents element screenshots; use the framework’s documented element capture behavior for your chosen browser setup.
- Output scale: Playwright documents CSS and device scale options. Choose CSS scale when one output pixel per CSS pixel is desirable; use device-pixel output when that is the intended result. The dimensions and sharpness differ, so keep the setting consistent in visual comparisons.
For repeatable visual comparisons, stabilize more than fonts: dynamic content and animation can change pixels between captures. Playwright’s PageAssertions API documents screenshot assertions that wait for consecutive screenshots to match and provide animation handling. That stabilizes screenshot assertions; it does not establish that a particular font face loaded.
Troubleshoot font waits and screenshot timeouts
The screenshot still shows a fallback font
- Confirm that the page actually requests the expected family, weight, and style for the target text.
- Check the target element’s rendered appearance or page-specific font state after the readiness wait. Do not treat a resolved readiness promise as confirmation that a particular face was used.
- Verify that the capture is taken after the content requiring the font has appeared; late-rendered content can have its own font-loading needs.
Navigation waits indefinitely or never reaches network idle
Some pages keep network activity open or produce ongoing requests. If a network-idle navigation condition does not settle, use a navigation condition that fits the page and wait explicitly for the content you need, then await document.fonts.ready. A navigation wait and font readiness serve different purposes.
Rank #4
The screenshot times out while waiting for fonts
A Playwright issue opened on September 29, 2026 reports a timeout on Linux WebKit 26.6 with Playwright 1.63.0 for a public page; the report also describes a Playwright 1.60.0 comparison that completed in that reproduction. It was an open, narrow report when retrieved, not evidence that screenshot capture or font readiness generally hangs. If you encounter a similar case:
- Record the automation framework version, browser engine and version, operating system, and timeout logs.
- Inspect the page’s font-set and font-face states and verify whether the same page works in a controlled reproduction.
- Compare with another relevant browser or framework version before attributing the failure to the page or to font readiness.
See the version- and environment-specific report at Playwright issue #42986.
Best Value
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its endpoint can return an image or PDF from one GET request. For example, using the supplied cURL pattern with the target URL changed:
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 documentation for request options. ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; these steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month without a card.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Does network idle mean the page’s web fonts are ready?
No. Network idleness can be a navigation condition, but wait separately for document.fonts.ready before capture.
Does awaiting document.fonts.ready guarantee the preferred font rendered?
No. It is a readiness step, not proof that every declared face loaded or that the preferred face was applied; use a page-specific typography check when that matters.
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.
