Crashes, 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 minuteWindows 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 reinstallBefore calling page.screenshot(), await the page’s document.fonts.ready promise in the browser. It resolves when the page’s used fonts have finished loading and related layout work is complete. If the site renders content asynchronously, wait for its own readiness signal first.
Wait for the page’s fonts before taking a screenshot
Use page.evaluate(() => document.fonts.ready) after navigation and any application-specific rendering wait, then call page.screenshot():
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
// Replace this selector with a real readiness signal for the site,
// or omit the wait if the page needs no extra application rendering time.
await page.waitForSelector('#app-ready');
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
await browser.close();
}This is a usage pattern, not a claim that the example has been tested against a live site. If the page is already ready after navigation, omit the selector wait.
Why the order matters
Puppeteer’s navigation condition and the page’s font readiness are separate concerns. Its guide shows navigation followed by capture, but a navigation condition such as networkidle2 does not necessarily mean an application has finished rendering its content. Wait for a site-specific signal where needed, then await the fonts promise immediately before capture. Puppeteer’s screenshots guide and Page.screenshot() API documentation describe navigation and capture; neither establishes that screenshot capture automatically waits for fonts.
Recommended Free Tools
#1 Best Overall
What document.fonts.ready does—and does not—guarantee
The browser’s document.fonts property exposes the document’s FontFaceSet. Its ready promise resolves after used-font loading and layout operations are complete, and no further font loads are needed. It is a practical signal that the fonts the document uses and their layout work have settled—not proof that every font declared in CSS loaded successfully. An optional face, for example, may not have been loaded in time to become part of the used set. See MDN’s FontFaceSet.ready and Document.fonts references.
This wait also does not cover unrelated asynchronous behavior. Late application rendering, images, and animations may need separate site-specific conditions if they affect the intended capture. A meaningful readiness signal is more useful than an arbitrary fixed delay.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Request a particular font explicitly when needed
If the capture depends on a specific face, request it with document.fonts.load() and a CSS font specification. You can provide representative text as a second argument. The method returns a promise fulfilled with the matching loaded FontFace objects; the promise rejects if a font fails to load. Consult MDN’s FontFaceSet.load() reference.
const faces = await page.evaluate(async () => {
return document.fonts.load('16px "Example Sans"', 'Representative page text');
});
if (faces.length === 0) {
throw new Error('No matching font faces were loaded');
}
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'screenshot.png' });Replace Example Sans and the sample text with the family and representative text relevant to your page. Use document.fonts.ready for ordinary page-wide used-font readiness; use document.fonts.load() when your code must explicitly request a particular face. A rejected promise should be handled as a font-loading failure rather than treated as a successful wait.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
Choose capture output separately from font readiness
Once the page is ready, Puppeteer’s screenshot options control the artifact, not whether fonts have loaded. Common choices include:
pathto save the image to a file.fullPage: trueto capture the full page rather than only the viewport.clipto capture a specified region.typeto choose an image format supported by the screenshot options.
See Puppeteer’s ScreenshotOptions interface for the available options.
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
Troubleshoot fallback fonts and incomplete captures
- The screenshot still shows a fallback font:
document.fonts.readyonly tracks the document’s used fonts. If a particular face matters, request it withdocument.fonts.load(); account for a rejected promise or an empty result instead of assuming the face loaded. - Text or other page content is missing: Navigation may have completed before the application finished rendering. Add a selector or another real, site-specific readiness condition before awaiting fonts.
- Images or animations are unfinished: The font promise does not wait for these. Add separate conditions for the visual elements that matter to the capture.
- The output has the wrong dimensions or region: Adjust
fullPage,clip, or other screenshot options. These determine capture output, not font readiness. - The font-loading promise rejects: Treat that as a failed explicit font request. Check the requested CSS font description and the page’s font availability rather than proceeding as though the intended face is ready.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server. A single GET request can return a screenshot or PDF; its capture options include waiting for a selector, a delay, or network idle. For a direct screenshot call, see the ScreenshotNeo API documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo removes supported cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing status. Its MCP server lets AI agents use screenshot tools. The Free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000 shots.
Sign up for 1,000 free screenshots a month—no card required.
Frequently Asked Questions
Does Puppeteer automatically wait for web fonts before taking a screenshot?
The cited Puppeteer documentation does not establish that it does. Explicitly await document.fonts.ready before calling page.screenshot().
Should I use networkidle2 or document.fonts.ready?
They serve different purposes: networkidle2 is a navigation condition, while document.fonts.ready is the browser-side signal for used-font loading and associated layout. Use both in sequence when appropriate.
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 →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
