Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →After the page and any application-rendered content are ready, await document.fonts.ready in the page, then call page.screenshot(). This waits for fonts currently used by the document and the related layout work; it does not prove that every font declared in CSS loaded successfully.
Wait for the page’s used fonts before capture
Use Puppeteer’s navigation wait, add a site-specific readiness check if the page renders asynchronously, and then await the browser’s font set:
As an Amazon Associate I earn from qualifying purchases.
await page.goto(url, { waitUntil: 'networkidle2' });
// If the application renders content asynchronously, wait for its own ready signal here.
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'screenshot.png' });Puppeteer’s screenshots guide shows navigation followed by a screenshot. The browser-side promise is important because the available documentation does not establish that page.screenshot() itself waits for font readiness.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use the right sequence for asynchronously rendered pages
- Navigate.
waitUntil: 'networkidle2'is a navigation condition, not a guarantee that a single-page application has finished rendering. - Wait for the page’s actual ready signal, if needed. Use a selector or other condition that reflects the target page’s content being ready. There is no universal application-ready selector.
- Wait for fonts. Run
await page.evaluate(() => document.fonts.ready). - Capture. Call
page.screenshot()with the output settings you need.
A complete example, including browser cleanup, is:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
// Replace this with a real readiness signal for the site, if one is needed.
await page.waitForSelector('#app-ready');
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
await browser.close();
}
})();#app-ready is an example only. Replace it with a selector that actually indicates the page is ready, or remove that wait when no extra application-specific wait is necessary. Puppeteer’s current API documentation identifies screenshot options such as path, fullPage, clip, and type; these control the captured output, not font loading. See the ScreenshotOptions interface.
#1 Best Overall
What document.fonts.ready does—and does not—guarantee
document.fonts is the document’s FontFaceSet. Its ready promise resolves after the document has completed loading fonts used by the page, layout operations are complete, and no further font loads are needed. The used fonts can differ from all fonts declared in CSS. In particular, readiness is not proof that every declared or optional font loaded as intended. MDN describes this behavior in its FontFaceSet: ready property reference.
The wait also does not cover unrelated work. Late application rendering, images, and animations may need their own site-specific conditions if they affect the screenshot. Prefer a meaningful readiness signal over an arbitrary fixed delay.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Explicitly request a particular font when it matters
If the screenshot must use a specific face, request it with document.fonts.load(), passing a CSS font description and, optionally, representative text. The promise returns the matching loaded FontFace objects and can reject if loading fails. This is different from the page-wide readiness check: use document.fonts.ready for fonts the document currently uses, and document.fonts.load() when you need to request a particular face explicitly. See MDN’s FontFaceSet: load() method.
await page.evaluate(async () => {
await document.fonts.load('16px "Example Font"', 'Representative text');
await document.fonts.ready;
});
await page.screenshot({ path: 'screenshot.png' });Replace Example Font and the sample text with a family and text appropriate to the page. If the explicit request rejects, investigate the font’s availability and loading rather than treating a settled page-wide readiness promise as confirmation that this face loaded.
Rank #3
Choose the screenshot output separately
Font readiness and screenshot shape are separate concerns. Set options based on the artifact you need:
pathspecifies where to save the screenshot.fullPage: truecaptures the full page rather than only the viewport.clipcaptures a specified region.typeselects an output image format where supported.
Changing these options does not replace the font wait.
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.readycovers fonts used by the document, not every declared face. If a specific font is required, explicitly request it withdocument.fonts.load()and handle a rejection as a loading failure. - The page content is missing or incomplete: navigation reaching
networkidle2does not establish that application rendering is done. Wait for a real page-specific signal before checking fonts. - Images or animations differ from the expected result: font readiness does not wait for them. Add separate, relevant conditions for those resources or behaviors.
- A selector wait times out: confirm that the selector exists on the target route and truly represents readiness; remove the example selector if the page does not use it.
- The wrong area or extent is captured: adjust
fullPageorclip. These options affect the output region, not whether fonts are ready.
Or skip the browser setup
For a screenshot API call instead of managing Puppeteer and browser readiness yourself, ScreenshotNeo accepts a URL and returns a screenshot. See the ScreenshotNeo website and API documentation.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.
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.
