How to Fix Website Screenshots That Show Missing Web Fonts on Windows

If a web font appears in the browser after a moment but is missing from your screenshot, the capture probably happened before the font and its layout finished loading. In browser automation, wait for document.fonts.ready before capturing. If the font stays missing in the live page, investigate the site’s font setup, browser settings, extensions, and network or privacy controls instead.

These are different problems: waiting can fix a screenshot captured too early, but it cannot repair a font file that the page never loads. The steps below work across browsers on Windows and help you distinguish timing, site configuration, and local browser issues.

1. Check whether the font is late or missing

Reload the page and watch the text during the first few seconds.
If the intended typeface appears after a delay, treat it as a capture-timing issue and use the font-ready wait in the next section.
If the font never appears, open the same URL in another browser. If it fails in multiple browsers, the site or its font delivery is a likely cause. If it fails in only one, focus on that browser’s settings and extensions.
Check whether the text is absent or simply blurry. ClearType can help with fuzzy text, but it does not fix a missing font request or an early screenshot.

A page can also render a system fallback font while its web font loads. That may look like the font is missing even though the browser is still waiting to swap in the intended face.

2. Wait for fonts before taking a screenshot

In Playwright, navigate to the page, wait for the browser’s used fonts to settle, and then take the screenshot:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });

try {
  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
  await page.evaluate(() => document.fonts.ready);
  await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
  await browser.close();
}

Install Playwright in your project with npm install playwright. Replace https://example.com with the page you need to capture. The document.fonts.ready promise fulfills when loading and layout operations for used fonts are done; it does not promise that every declared but unused face has loaded, or that a page will stop changing after capture. See the MDN documentation for document.fonts.

Python with Playwright

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1440, "height": 900})
    try:
        page.goto("https://example.com", wait_until="domcontentloaded")
        page.evaluate("document.fonts.ready")
        page.screenshot(path="page.png", full_page=True)
    finally:
        browser.close()

Install the Python package and browser binaries with pip install playwright and playwright install chromium.

When a font wait is not enough

If the page also builds content asynchronously, waiting for fonts alone will not ensure that the content is ready. Wait for a page-specific selector, application state, or other known condition before capturing. For example, with Playwright you can wait for a heading that appears after the page finishes rendering:

await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.getByRole('heading', { name: 'Latest reports' }).waitFor();
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'page.png', fullPage: true });

Use a selector that genuinely indicates the content you need. A fixed sleep can be a last resort for a known delay, but it is less reliable: a short delay may capture too early, while a long delay wastes time on every run.

3. If you own the site, check font delivery and CSS

When the font is absent even after waiting, check the website rather than adding longer screenshot delays.

Verify the provider embed. Confirm that the font provider’s embed code is present and has not been altered. Adobe says minifying its embed code into locally hosted CSS or JavaScript can prevent fonts from loading. Follow the provider’s current integration and licensing instructions.
Check the exact family name. The CSS font-family must match the family name provided by the font service or font file.
Check weight and style. Make sure the requested font weight and style are included and referenced correctly. A page may load regular but not bold, for example.
Check delivery. Verify the font stylesheet and font files can be reached in the environment where the browser or screenshot service runs. Google Fonts serves browser-appropriate CSS and font formats; a blocked stylesheet or font request prevents the intended face from appearing.
Compare browsers. If the font loads in one browser but not another, check that browser’s downloadable-font preferences and modified settings.

For provider-specific steps, consult Adobe’s website font troubleshooting guide and Google Fonts’ technical considerations.

4. Isolate browser settings and extensions

If the problem occurs in one browser, test a clean browser profile or temporarily disable extensions one at a time. Ad blockers, privacy tools, script blockers, and appearance customizers can affect page resources or styling.

Open the URL in another browser and compare the font.
Temporarily disable extensions that can block requests or alter page styling, then reload.
Review browser font preferences and privacy protections. In Firefox, check whether downloadable fonts are permitted and whether pages can choose their own fonts.
If a privacy protection exception makes the font load, confirm the result and restore your preferred protection settings afterward.
Check that the system date and time are correct if secure resource verification is failing.

Mozilla’s browser troubleshooting guide recommends comparing browsers and checking extensions and settings when websites look wrong. Start with these narrow checks before considering a browser reset.

5. Make fallback typography behave well

If you control the site’s CSS, font-display controls how text appears while a web font loads. For example:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Brand Sans", Arial, sans-serif;
}

swap, fallback, and optional can allow fallback text instead of invisible text while a custom font is not ready. The browser may then replace the fallback with the custom face, which can shift layout. Google explains this tradeoff as a flash of unstyled text (FOUT) instead of a flash of invisible text (FOIT). A preload may help in some cases, especially alongside optional, but preloading too many assets can hurt performance. Measure before adding preloads. See Chrome’s guidance on keeping text visible during font loading.

6. Use ClearType only for blurry text

On Windows, ClearType adjusts how text edges are rendered for readability. If the intended font is present but looks fuzzy, run the ClearType Text Tuner and follow its prompts. You can also adjust the Windows setting for smoothing screen fonts. These steps affect text clarity; they will not make a blocked, unavailable, or incorrectly configured web font load. See Chrome Help’s Windows advice for text that displays improperly.

7. Troubleshoot common screenshot font failures

Symptom	Likely cause	What to do
Screenshot has fallback font, but browser switches to the intended font later	Capture ran before used fonts and layout settled	Await `document.fonts.ready` before capture; also wait for page-specific dynamic content if needed.
Font stays absent after waiting in multiple browsers	Provider embed, CSS family, requested face, or font delivery problem	Check the embed, exact family name, weight/style, and whether the stylesheet and font files are reachable.
Font is missing in only one browser	Browser preference, extension, privacy protection, or customization	Compare another browser, then isolate settings and extensions one at a time.
Only bold or italic text uses a fallback face	That weight or style is not provided or is referenced incorrectly	Load the required face and verify the CSS weight and style declarations.
Text is present but looks blurry	Text rendering or display clarity issue	Adjust ClearType or screen-font smoothing; do not treat this as a font-loading fix.
Page text changes after the screenshot despite the font wait	JavaScript, images, or other late content is still changing layout	Wait for the relevant selector or application condition in addition to fonts.
Old Internet Explorer renders fonts differently	Legacy document mode or downloadable-font security settings	Only if you must support Internet Explorer, review the provider’s legacy-browser guidance and document mode. Do not apply these steps to modern browsers.

8. Performance, reliability, and cost considerations

Waiting for font readiness improves consistency when the font is expected to load, but it adds whatever time the page needs to settle. A fixed delay adds the same wait to every capture and can still be too short on a slow connection. Prefer a meaningful readiness condition and set a sensible overall timeout in your automation.

For repeatable captures, use the same browser engine, viewport, and font-loading environment. A screenshot generated on a machine with different network access, browser preferences, or extensions may differ from a Windows desktop capture. If font delivery fails, an indefinite wait will not repair it; treat a timeout as a signal to inspect the underlying request and site setup.

Cost depends on the method. Browser automation uses your compute, browser runtime, and network requests; the cost varies with your hosting and workload. A screenshot API can avoid maintaining browser infrastructure, but compare its capture behavior and billing rules before relying on it for large batches.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API can wait for page conditions and return an image or PDF; see the ScreenshotNeo API documentation for its parameters and response details. Example request:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Cookie banners are accepted and removed before the shot, along with known newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the page verdict and billing status. An MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

FAQ

Does `document.fonts.ready` load every font declared by a page?

No. It resolves after used fonts and their relevant loading and layout operations are done. An unused face or an optional face that never loads may remain unloaded.

Will ClearType fix a web font that is missing from a screenshot?

No. ClearType can improve fuzzy text rendering on Windows. Use font-loading and site troubleshooting steps for a missing typeface.

Should I use `networkidle` instead of waiting for fonts?

Network quiet and font readiness answer different questions. A page can have no active network requests while layout or fonts still need attention, or it can keep background requests open after the fonts are ready. Wait for the conditions your capture actually needs.

What if the font appears only after disabling a browser extension?

That points to interference from that extension or one of its rules. Review its settings or site-specific controls, and verify the page works with your preferred browser protections enabled where possible.