Fix missing fonts in production by making the browser environment reproducible, then check whether the missing typeface is a system font or a web font served by your app. On Linux CI or in a custom container, install Playwright’s browser and operating-system dependencies with npx playwright install --with-deps, or use an official Playwright Docker image pinned to a version that matches your project. If Chromium launches but text looks wrong, inspect the app’s font requests and compare the installed fonts in the exact production image before changing CSS.
First identify which font is missing
“Missing font” can describe two different failures. A system font is installed in the operating system and may be used by CSS such as font-family: Arial, sans-serif. A web font, such as a .woff2 file, is fetched by the page from your application or another origin. Installing Playwright’s browser dependencies does not ensure that your application’s web-font files were built, deployed, requested successfully, or permitted by the production security policy.
Start by recording the environment that produces the wrong result:
- Base Docker image or Linux distribution and version.
- Playwright package version and browser channel.
- Whether tests run headless, and which user runs Chromium.
- The font family expected, whether it is a system or web font, and whether the page is rendered in the same container locally and in CI.
In a JavaScript project, check the installed Playwright package version with npx playwright --version. Compare it with the version of any official Playwright image you use. A mismatch can prevent Playwright from locating the browser executable; it is not just a font-rendering difference.
#1 Best Overall
Install Chromium and its Linux dependencies
For a Debian- or Ubuntu-based custom build, install the project dependencies first, then let the Playwright CLI install the browser and its supported operating-system dependencies. For Chromium only, use the browser-specific form:
npm ci
npx playwright install --with-deps chromiumIf the project needs Playwright’s default browser set rather than only Chromium, use npx playwright install --with-deps instead. Run the command in the build environment that will run the tests; installing browsers on a developer laptop does not install them in a separate CI container.
Keep the Playwright dependency version explicit in the project lockfile and install from that lockfile. Reproducibility requires the browser, package and operating-system environment to be aligned. A command that downloads the browser at build time is useful for a custom image, but the build must still use the same Playwright package version and a supported base image.
Headless-only builds
The Playwright browser guide documents npx playwright install --with-deps --only-shell for headless-only CI. For the newer Chromium headless mode, it documents --no-shell. Choose the option that matches how the project launches Chromium; do not apply either flag blindly to a build that needs a different browser mode.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
Use a version-pinned Playwright image when possible
An official Playwright Docker image bundles browsers and operating-system dependencies, reducing differences between CI runs and developer machines. Pin the image to a specific version and match that version to the Playwright package used by the project. The Docker guide warns that when the image and project versions do not match, Playwright may be unable to locate browser executables.
Official image tags are published for Ubuntu 22.04 (jammy), Ubuntu 24.04 (noble) and Ubuntu 26.04 (resolute). Select a tag and version from the official image publication that matches your package; avoid relying on a mutable “latest” image when a reproducible build matters. The correct image is the one matching your project and deployment requirements, not necessarily the newest tag.
If you maintain a custom image instead, make the base distribution and dependency installation part of the build, and pin the Playwright package. Treat a change to the base image, Playwright version, or browser channel as a rendering-environment change that deserves validation.
Verify application web fonts separately
If Chromium starts normally but the page falls back to another typeface, test the font delivery path rather than reinstalling the browser. Confirm that the production artifact contains the font assets and that the page actually requests them. In browser network diagnostics, inspect each relevant .woff2, .woff or other font request for a successful response. Check the production Content Security Policy (CSP) and cross-origin resource sharing (CORS) behavior if those requests are blocked.
Compare the font inventory inside the deployment container with the environment where the screenshot looks correct. Minimal Linux images may not have the same system fonts as a developer workstation, so a generic fallback can render successfully while producing different line breaks, widths or screenshot pixels. If your design depends on a particular system font, ensure that font is present in the production image; if it depends on an application web font, verify its deployed file and response instead.
Reproduce and debug in the production image
- Build or pull the exact deployment image. Use the same base image, Playwright version, browser channel, environment variables and execution user as the failing job.
- Run the same test or screenshot command inside it. This separates a container/runtime difference from a page-specific issue that also occurs elsewhere.
- Enable launch diagnostics if Chromium fails to start. Run the test with
DEBUG=pw:browser. Playwright’s CI guide specifically recommends this setting when debuggingError: Failed to launch browser. - If Chromium launches, inspect font requests and installed fonts. A successful browser launch does not demonstrate that a page’s web-font request succeeded or that an expected system font exists.
- Change one layer at a time. Correct a package/image mismatch, dependency issue, missing system font, or blocked web-font request based on the observed failure. Changing CSS before identifying the fallback can hide the actual deployment defect.
This distinction helps classify the result: a browser launch error points first to browser installation, runtime dependencies or version alignment; successful rendering with the wrong typeface points first to font availability, the page’s font request, or CSS font selection.
Run Chromium reliably in Docker
The Playwright Docker guide recommends the Docker --init flag to avoid special treatment of processes running as PID 1. It also recommends --ipc=host with Chromium because Chromium can run out of memory and crash without it. Apply these options to the container invocation where you control Docker settings; they are operational safeguards, not font-installation commands.
For an unusual local launch failure, the Docker guide suggests trying --cap-add=SYS_ADMIN during development. Treat that as a diagnostic workaround, not a default production permission: determine the actual cause and use the least privilege your deployment permits.
Recommended Free Tools
Rank #4
Playwright’s published browser builds target supported glibc-based images. Its Docker guide says Alpine and other musl-based distributions are unsupported for its Firefox and WebKit builds. If you use Alpine for a Chromium-only workload, validate Chromium behavior separately rather than assuming every Playwright browser has the same support status. A supported Debian- or Ubuntu-based image is the more predictable choice when rendering consistency is the priority.
Choose the fix based on the symptom
| Observed symptom | Most relevant check | Next action |
|---|---|---|
Error: Failed to launch browser or no browser executable found |
Playwright package and browser/image version; browser installation and Linux dependencies | Align the versions and install with npx playwright install --with-deps or use a matching pinned official image. Use DEBUG=pw:browser for launch diagnostics. |
| Chromium launches, but only production renders a fallback font | Whether the expected typeface is a system font or a web font; compare the deployment image and font requests | Provide the needed system font or fix the application font asset, response, CSP/CORS or CSS selection as appropriate. |
| Chromium intermittently crashes in Docker | Container lifecycle and shared memory configuration | Use the Docker guide’s recommended --init and --ipc=host settings where available; inspect resource and launch diagnostics. |
| Local and CI screenshots differ despite successful tests | Base image, font inventory, package version, browser channel and app font responses | Reproduce inside the deployment image, then compare the differing environment or request instead of assuming the test itself is inconsistent. |
Make screenshot output reproducible
Fonts affect more than visual style: a fallback with different glyph widths can change line wrapping and element dimensions, which shifts the rest of a page. For stable screenshot comparisons, keep the rendering environment and font sources consistent, and wait for the page’s relevant content and font requests to be ready before capture. The browser version, Linux image and font files are all part of the rendering setup.
When comparing fixes, evaluate five things: whether the image and package are pinned, whether the browser dependencies are complete, whether the font comes from the system or the app, whether local execution matches deployment, and whether you control the container or use remote browser infrastructure. A remote screenshot service may be useful if your goal is to obtain a screenshot without maintaining your own browser environment, but it does not repair the fonts in a Playwright container you continue to run.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot without installing and maintaining Chromium in your own container, ScreenshotNeo provides a website screenshot API and MCP server for developers. It is an alternative capture path, not a way to install fonts into your Playwright build. One GET request can return a PNG, JPEG, WebP or PDF; the response identifies the page verdict and whether it was billed. Cookie banners are accepted and removed along with 60+ known consent platforms, newsletter popups and chat widgets before the shot. Bot checks, blank pages, timeouts, failed loads and cache hits cost nothing. Its MCP server provides take_screenshot, get_page_info and capture_pdf for AI agents and MCP clients.
Free tools Windows power users keep installed
One-click scans. No signup required.
Example cURL request (see the ScreenshotNeo API documentation):
Best Value
- Used Book in Good Condition
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month with no card.
Frequently asked questions
Does switching from headless to headed Chromium fix a font fallback?
Not by itself. First establish whether the intended font is available to the process or whether the page can fetch it; changing browser mode does not supply a missing font file.
Should I grant SYS_ADMIN to every production container?
No. The Docker guide mentions trying it for unusual local launch errors. Investigate the actual failure and avoid granting a broad capability unless your deployment has a specific, justified need.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteQuick 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.
