ScreenshotNeo

BlogHow-to

How to capture a full-page screenshot of a page with web fonts in Firefox

Capture an entire Firefox page after its web fonts load. Learn how to check font readiness and troubleshoot fallback typography.

By the ScreenshotNeo team4 October 20265 min read

To capture a full-page screenshot in Firefox with the page’s web fonts rendered, wait for the page to finish rendering, check font readiness in the Web Console with await document.fonts.ready, then open Firefox’s screenshot tool and choose Save full page. That promise is a useful timing signal for fonts the page uses, but it does not force blocked fonts to download or load fonts that the page never uses.

1. Wait for the page and its fonts

  1. Open the page in Firefox and let its content finish rendering. If the page loads content as you scroll, scroll through it first so that content and lazy-loaded images have a chance to appear.
  2. Open the Web Console for the page. In Firefox, you can open Developer Tools with Ctrl+Shift+K on Windows or Linux, or Command+Option+K on macOS.
  3. Enter and run this expression:
await document.fonts.ready

The expression resolves when loading and layout operations for fonts used by the document have completed. It helps avoid capturing during a font swap, when text may briefly appear in a fallback typeface.

It is not a guarantee that every font listed in CSS has been fetched. A declared font that is not used on the page may remain unloaded. Optional fonts may also not load in time, and a browser setting, extension, network restriction, or website problem can prevent a font from loading. If the page uses content that appears only after scrolling or interaction, handle that before taking the screenshot too.

2. Capture the whole page in Firefox

  1. Right-click an empty area of the page and choose Take Screenshot. You can also use Ctrl+Shift+S on Windows or Linux, or Command+Shift+S on macOS.
  2. In the screenshot interface, choose Save full page.
  3. Download the screenshot or copy it to the clipboard.

Save full page captures the entire webpage. The visible-page option captures only the part currently shown in the viewport. Choose based on the scope you need; use full page for a long article or page audit.

3. Check the result if typography looks wrong

Inspect text in multiple parts of the captured page. A heading and body copy may use different font families, and a font used only far down the page may not have loaded until that content was rendered.

  • Compare the screenshot with the live page after waiting for fonts. If the live page also shows fallback typography, the capture may simply reflect what the browser rendered.
  • Run await document.fonts.ready again after the page has finished loading or after triggering content that uses additional fonts.
  • Check whether Firefox preferences or an extension blocks remote font downloads. Then check the browser’s network access to the font resource and the page’s loading errors.
  • Remember that the readiness promise only covers fonts used in the document’s completed loading and layout work; it does not load every font a site declares.

4. Troubleshooting

What you see Likely cause What to do
The screenshot uses a fallback font. The web font did not load, is blocked, or was not ready when the capture began. Wait for rendering, run await document.fonts.ready, and check whether a preference, extension, or network issue blocks the font resource.
The readiness expression completes, but a font is still missing. The expression does not guarantee that every declared font was fetched. The missing font may not be used yet, may be optional, or may have failed to load. Make sure the relevant content is rendered, then inspect the page’s font loading and browser network errors. Treat readiness as a timing check, not a repair.
The screenshot contains only the visible portion of the page. The visible-page capture option was used. Open the screenshot tool again and select Save full page.
The screenshot tool does not open from the context menu. The click may have been on page content that intercepts the context menu. Try right-clicking an empty area, or use the Firefox screenshot shortcut for your operating system.
Some page content or images are missing from the full-page image. The page may still be rendering, or content may load only on scroll or after interaction. Wait for the page, scroll through sections that load on demand, and trigger required content before capturing.

5. When the built-in capture is enough

Firefox’s built-in screenshot flow is a direct choice for a one-off capture when the page is open in the browser. It offers full-page and visible-page scope, and lets you save the image or copy it. The font readiness check helps with timing; it cannot recover a font the browser cannot access.

For repeatable captures in scripts or services, you may prefer an API. ScreenshotNeo is a website screenshot API and MCP server for developers. Its capture options include full-page screenshots with lazy images loaded, custom wait conditions, and options to set headers, cookies, user agent, timezone, and geolocation. See the ScreenshotNeo website and API documentation for details.

Or skip the browser setup

Make a single GET request to ScreenshotNeo’s API to capture a page. Replace YOUR_API_KEY with your key and change the URL as needed. This runnable Python example saves the response as a WebP file:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Other ready-to-run request forms:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes 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 provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots. Every feature is available on every plan. Read the ScreenshotNeo documentation and sign up for 1,000 free screenshots a month, with no card required.

FAQ

Does document.fonts.ready download every font declared by the site?

No. It resolves after loading and layout work for used fonts. Fonts that are not used may remain unloaded.

Should I choose full-page or visible-page capture?

Choose Save full page to capture the whole webpage. Choose the visible option when you only need the current viewport.

Can the readiness check fix a blocked font?

No. It reports when relevant font loading and layout work has completed; it cannot bypass browser settings, extensions, network restrictions, or a font resource that is unavailable.