How to Fix GrabzIt Screenshots with Missing Fonts or Images

If a GrabzIt screenshot is missing a font or image, first check whether the capture can reach that asset at all. A longer wait helps only when the resource is still loading; it cannot fix a broken URL, a private or authenticated asset, or an inaccessible local path. Once asset access is confirmed, wait for the page’s content to appear, then compare the result with Chrome at the same viewport.

This guide covers URL captures, supplied HTML, and JavaScript ConvertPage captures. The relevant settings and limits vary by GrabzIt interface, so check the documentation for the exact one you use.

1. Identify how GrabzIt receives the page

Start by identifying the capture input, because it determines how asset URLs resolve and who needs access to them:

• Public page URL: GrabzIt opens the URL and requests its CSS, images, and fonts. Those resources must be available to the capture process.
• Supplied raw HTML: Relative asset paths may not resolve as they do on your local site. Use absolute URLs or embed suitable assets as Base64 data URLs.
• JavaScript ConvertPage: The screenshot flow must be able to fetch the page’s resources. Local-only or private resources may be unavailable to it.

Write down the capture method, the affected asset URL, and whether the asset is missing every time or only on pages with delayed content. This narrows the cause before you change timing options.

2. Check whether the assets are reachable

Open the page in a browser, use the developer tools Network panel, and find the failed font or image request. Record its full URL and status. Look for 404s, redirects, authentication requirements, blocked requests, invalid paths, or a hostname that resolves only on your computer or private network.

For supplied HTML and CSS, replace relative references such as /assets/site.woff2 or ../images/hero.png with fully qualified URLs, for example https://example.com/assets/site.woff2. Alternatively, embed an image as a Base64 data URL when that is appropriate. External absolute URLs keep the HTML smaller but require the capture to reach the host; embedding avoids an external image request but increases the HTML payload. GrabzIt’s guidance covers both approaches for HTML-to-image captures (HTML to Image API).

For JavaScript captures, make sure resources are publicly available to the screenshot flow. A URL that works on your workstation may depend on a local server, private DNS, a VPN, session cookies, or an IP allowlist that the capture process does not have. GrabzIt’s JavaScript screenshot guidance notes that CSS and images need to be publicly available to load in this flow.

3. Wait for late content only after checking access

When an image or font request succeeds eventually but finishes after the capture, wait for a signal that indicates the target content is ready. A visible CSS selector is usually a better signal than an arbitrary long delay when the page has a stable element that appears after its asynchronous work completes.

1. Use browser developer tools to find a specific selector for the content or a loading indicator that disappears when content is ready.
2. Configure GrabzIt to wait for that selector to become visible, if your interface supports it.
3. If the selector appears before the font or image finishes loading, add a modest delay after the selector wait and verify the result.
4. Reduce the delay to the smallest value that reliably captures the final content.

Choose a selector that identifies the intended element specifically. If a selector matches several elements, the wait may complete when one matching element becomes visible, even though the particular image or section you care about is not ready.

GrabzIt documents different limits for different interfaces: its REST reference gives delay a maximum of 30,000 ms and waitfor a maximum of 25 seconds. A support article describes waits up to 30 seconds for its documented techniques. Treat these limits as interface-specific, and confirm the current documentation for your integration. The support article also describes an “Accelerated Delay” option for supported capture types; do not assume it applies to every capture route. See GrabzIt’s wait guidance and the REST API reference.

4. Compare the browser and viewport

If the asset request succeeds and the timing is adequate, check whether the remaining difference is actually a layout issue. Compare the capture with the page in Chrome, which GrabzIt recommends because its capture software is Chromium-based. Match the browser width and height to the capture settings, then vary the width if responsive breakpoints move or hide content.

An asset can be present but clipped, covered, or moved outside the visible area. That is different from a failed asset request. GrabzIt’s browser consistency guidance suggests trying a delay of 5,000 ms or more for load-timing problems and varying browser width for layout differences. The delay is a troubleshooting suggestion, not a fix for an inaccessible asset.

5. Use this troubleshooting decision tree

Symptom	Likely cause	Next action
Network request returns 404	Incorrect or relative asset URL	Correct the path; use an absolute URL for supplied HTML.
Request redirects or returns an access error	Authentication, allowlist, or access restriction	Make the resource reachable by the capture flow or provide the required supported access configuration.
Asset works locally but not from the capture	Localhost, private network, local DNS, or VPN dependency	Host it where the capture process can reach it and confirm its public URL.
Request succeeds after the screenshot is taken	Asynchronous load or lazy loading	Wait for a specific visible selector; add a short delay if dependent resources still need time.
Image or font is present but the page looks different	Viewport, responsive breakpoint, or clipping difference	Compare in Chrome and align browser width and height.
Only raw HTML captures fail	Relative URLs resolve differently or external resources are unavailable	Use absolute URLs or embed appropriate image data.

6. Code patterns for wait options

There is no single code sample that applies to every GrabzIt integration: option names and limits depend on the language wrapper or API route. The Node.js technical reference lists browserWidth, browserHeight, delay (up to 30,000 ms), and waitForElement as a CSS selector for a visible element. Apply the equivalent options supported by your installed client and consult the Node.js technical documentation for its current request shape.

Use the following as configuration pseudocode, not as a drop-in GrabzIt request. Substitute the option names into the capture call for your SDK or interface:

// Configuration intent; adapt to the GrabzIt SDK/API you use.
const captureOptions = {
  browserWidth: 1440,
  browserHeight: 1000,
  waitForElement: ".product-gallery img",
  delay: 1000
};

For the REST API, use its documented waitfor and delay parameters and stay within their respective limits. Avoid copying option names from another interface without checking its reference; the Node.js waitForElement name and REST waitfor parameter are documented separately.

7. Keep captures reliable and efficient

• Fix the cause before adding wait time. A delay increases the time spent waiting and cannot make a private or broken resource reachable.
• Prefer event-like readiness signals. A selector tied to the target content avoids waiting longer than necessary on pages with predictable structure.
• Use a short follow-on delay selectively. Some pages insert the element before its font or image request completes. Verify whether that happens before retaining the delay.
• Change one variable at a time. First fix the URL or access issue, then timing, then viewport. This keeps the diagnosis clear.
• Save a fresh capture after each change. Separate a failed resource request from a resource that arrives too late and from an asset that is present but clipped.

GrabzIt advertises web-font and lazy-loaded-image support, but this does not guarantee that every resource will render in every capture. The asset must still be correctly referenced and available to the capture process. See its Website Screenshot API description alongside the resource guidance above.

8. Or skip the browser setup

If you want a screenshot API that handles page cleanup before capture, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. Add your key and target URL; see the ScreenshotNeo API documentation.

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

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

• Cookie banners are accepted and removed before capture; 60+ known consent platforms, newsletter popups, and chat widgets can be removed, with each step configurable.
• Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers report the page verdict and billing status.
• An MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
• The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Every feature is available on every plan.

Start with 1,000 free screenshots a month; no card required.

9. Frequently asked questions

Will adding a longer delay always make the font appear?

No. It may help if the font is still loading, but it will not repair a broken URL, private resource, or access restriction.

Should I use a selector wait or a fixed delay?

Use a selector when a stable visible element indicates that the relevant content has appeared. Use a delay when readiness has no reliable selector, or add a modest delay after a selector if related assets finish later.

Why does the screenshot differ from my browser even though the image loaded?

Check the capture viewport and responsive layout. The image may be present but clipped or repositioned at a different width.

What information helps diagnose a persistent failure?

Record whether the input was a URL, raw HTML, or JavaScript capture; the failing asset URL and network status; the selector or delay configured; and the capture viewport. These details distinguish access, timing, and layout problems.