Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11To get a custom font into a website screenshot, make the font available to the browser that renders the page, apply it before capture, and verify that it actually loaded. A CSS declaration alone is not enough: if the rendering environment cannot fetch or access the font, the browser may use a fallback. This guide shows how to set up and capture typography with Playwright, how to inject a font rule into Cloudflare Browser Run, and what to control for reliable results.
Why a screenshot can show the wrong font
A screenshot records the browser’s rendered pixels, not the font-family preference in your stylesheet. If the requested font is missing, inaccessible, or not loaded when the capture occurs, the browser can render a fallback instead. The resulting text may have different widths, line breaks, weights, and spacing even though the CSS names the font you intended.
This can happen when a page looks correct on your workstation but is rendered elsewhere. Cloudflare documents that Browser Run uses managed Chromium with a standard set of pre-installed fonts; if a requested font is absent, Chromium falls back to a similar supported font. That behavior is specific to its documented environment, not a claim about every hosted browser. See Cloudflare Browser Run documentation.
For predictable captures, identify the renderer, make the font available to it, wait for the page and font to load, and check the rendered result before saving. Keep the browser and capture conditions consistent when comparing screenshots.
#1 Best Overall
Make the custom font available to the page
For a website you control, put the font file somewhere the page can load it and declare it with @font-face. Use the correct family name, weight, and style for the file; otherwise the browser may select another face or synthesize a weight.
@font-face {
font-family: "Editorial Display";
src: url("/fonts/editorial-display.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
body {
font-family: "Editorial Display", sans-serif;
}The path and family above are illustrative, not a tested font. Replace them with a font file and URL available to the page in the environment that will render the screenshot. If the page is on another domain, verify that the font request succeeds there too; a font URL that works from your laptop may not be reachable from a hosted renderer.
For a third-party site you do not control, you may be able to inject a stylesheet in the capture browser, but the font file still needs to be reachable and permitted for that use. Check the chosen font’s terms and usage rights; this example does not establish a license.
Capture with Playwright and wait for fonts
Playwright lets you control a browser page, wait for fonts, and save a viewport or full-page screenshot. Install Playwright and its browser as described in the Playwright getting started guide. The example below assumes your page already serves the font and its CSS. Save it as capture.mjs, set TARGET_URL to the page you want to capture, then run it with Node.js.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →import { chromium } from 'playwright';
const url = process.env.TARGET_URL;
if (!url) throw new Error('Set TARGET_URL to the page to capture');
const browser = await chromium.launch({ headless: true });
try {
const page = await browser.newPage({
viewport: { width: 1440, height: 1000 },
deviceScaleFactor: 1
});
await page.goto(url, { waitUntil: 'networkidle', timeout: 60000 });
await page.evaluate(() => document.fonts.ready);
const fontStatus = await page.evaluate(() => ({
status: document.fonts.status,
editorialFontAvailable: document.fonts.check('400 16px "Editorial Display"')
}));
console.log(fontStatus);
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}Run it with TARGET_URL=https://example.com node capture.mjs on macOS or Linux, replacing the URL with your page. On Windows PowerShell, use $env:TARGET_URL="https://example.com"; node capture.mjs.
document.fonts.ready resolves when the document’s font loading and layout operations are complete. The document.fonts.check result is a useful diagnostic for whether the requested face can be used for the specified text style; it does not prove that every glyph or every weight in a font family is available. Inspect the actual capture as well, especially when line wrapping or visual fidelity matters.
Playwright’s screenshot API supports viewport and full-page capture, scale, output format, and screenshot-time stylesheets. Consult the Page screenshot API for the current options. Use fullPage: true when content below the viewport matters. Keep a fixed viewport and device scale factor for comparisons; changing them can change text wrapping and rasterized output.
Inject a font rule in Cloudflare Browser Run
Cloudflare’s Browser Run documentation shows injecting CSS with addStyleTag before taking a screenshot or PDF. This is useful when you need to apply a font rule in the managed browser session rather than editing the site’s original stylesheet. The font file still must be reachable from the browser.
Recommended Free Tools
const fontCss = `
@font-face {
font-family: "Editorial Display";
src: url("https://example.com/fonts/editorial-display.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
body {
font-family: "Editorial Display", sans-serif !important;
}
`;
await page.addStyleTag({ content: fontCss });
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: "page.png" });This is an illustrative browser-side pattern; adapt it to the Cloudflare Browser Run API and session setup you use. The !important declaration can override ordinary page rules, but it will not make an unavailable font load. If the page uses more specific selectors or inline styles, target the relevant elements deliberately rather than forcing a broad rule.
Control capture conditions for consistent typography
When screenshots are used for design reviews, documentation, or visual comparisons, a font is only one source of variation. Playwright notes that host operating system, browser version, browser settings, hardware, power source, and headless mode can affect rendering. A stable process reduces false differences between captures.
Rank #3
- Use the same renderer: keep the browser version, operating environment, and headless setting stable where practical.
- Fix the viewport and scale: capture at the same width, height, and device scale factor so text wraps and rasterizes consistently.
- Wait for the state you need: wait for navigation and fonts, then use a specific selector or deliberate delay if the page continues changing after network activity ends.
- Suppress volatile content: use screenshot-time CSS to hide carousels, timestamps, ads, or other changing elements that are irrelevant to the comparison.
- Choose the right scope: use viewport capture for the visible composition, full-page capture for below-the-fold content, and element capture when you need a particular component.
Playwright documents applying a stylesheet at screenshot time and options for full-page capture and scale in its screenshot API. For visual regression work, treat a change in browser or host environment as a possible cause of pixel differences before attributing them to a design change.
Or skip the browser setup
If you need an image or PDF from a URL without managing a browser session, ScreenshotNeo is a screenshot API and MCP server. Its one-call endpoint returns a PNG, JPEG, WebP, or PDF. A screenshot service cannot make a private local font file available to a remote page automatically: the font must be referenced by the page or otherwise be accessible to the rendering session. For API parameters and output options, see the ScreenshotNeo documentation.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpIn this example, replace the URL with the page that loads your font. ScreenshotNeo removes supported cookie and consent banners, newsletter popups, and chat widgets before the shot; each of those cleanup steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for free: 1,000 screenshots a month, no card required.
Troubleshoot a screenshot with the wrong font
The CSS names the font, but the screenshot still looks like a fallback
- Check that the font URL returns the actual font file in the browser environment, not a missing-file page or an access-denied response.
- Confirm the family name, weight, and style in
@font-facematch the CSS request. - Wait for
document.fonts.readybefore capture and inspectdocument.fonts.check()for the requested face. - If rendering in Cloudflare Browser Run, remember that its managed Chromium has a standard pre-installed font set and can fall back when a requested font is absent. Injecting a rule does not install a missing or unreachable font file.
Text wraps differently from the design reference
First check whether the intended font actually rendered. Then compare viewport width, device scale factor, browser version, and operating environment. Font metrics and available width both affect line breaks; a capture at a different viewport is not a like-for-like comparison.
The first capture is wrong but a later one looks right
The capture may have occurred before the font finished loading or before page content settled. Wait for the font set and for a page-specific readiness condition. If network-idle waiting is unsuitable because a site keeps making requests, wait for a selector that indicates the desired content is ready, or use a measured delay as a fallback.
The font loads locally but not in a hosted browser
A font installed on your workstation is not necessarily installed in the remote renderer. Serve the font with the page or use a reachable font URL and an injected rule where the service permits it. Do not assume that every hosted browser has Cloudflare Browser Run’s documented font set or behavior.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose capture settings for the deliverable
For an ordinary design review, a fixed viewport screenshot is usually easiest to compare. Use full-page capture when the whole page, including content below the fold, is part of the review. Increase output scale when the destination needs more pixels, but keep it fixed across a comparison set. Use a consistent image format appropriate to the destination; format and scale affect file size and visual presentation, not whether the intended font loaded.
If you are testing one component, capture that element rather than a long page so the output is focused. If you are producing a PDF, verify page size, margins, and pagination separately: a font can load correctly while changing line wrapping enough to affect page breaks. The screenshot controls and available options depend on the rendering tool; consult its current API documentation rather than assuming all browsers expose identical controls.
Keep font use and comparison evidence clear
Use only font files you are permitted to use in the relevant context, and keep the font source and version stable for repeatable work. When sharing a visual comparison, record the renderer, viewport, scale, and whether the capture was full-page. Those details help someone distinguish a genuine typography change from a difference in rendering conditions.
Frequently Asked Questions
Can CSS alone guarantee that a custom font appears in a screenshot?
No. The rendering browser must be able to load or access the font, and capture should wait until font loading has settled.
Can I inject a custom font into Cloudflare Browser Run?
Cloudflare documents adding an @font-face rule with addStyleTag before capturing. The referenced font file still needs to be reachable by the browser.
Why do screenshots differ even when the page CSS is unchanged?
Rendering can vary with the browser and host environment, including browser version, operating system, settings, hardware, and headless mode.
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.
