Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

PhantomJS font problems usually come from one of four places: the wrong PhantomJS executable is running, a web-font request fails or arrives after capture, the host lacks the requested font and substitutes another, or a build/platform difference changes rendering. Check those causes in that order before changing page CSS. This guide covers PhantomJS image screenshots and the separate case of PDF output.

1. Confirm which PhantomJS executable is running

Start by checking the binary and version used by the process that produces the screenshot:

phantomjs --version
which phantomjs

On Windows, use where phantomjs in Command Prompt or Get-Command phantomjs in PowerShell. Compare the result with the executable path configured in your script, service, container, or scheduled task. A shell can find a different copy from the one your application runs. The PhantomJS troubleshooting page explicitly warns that multiple installations can conflict over which executable is selected: PhantomJS troubleshooting.

The PhantomJS CLI documentation describes version 2.1.1 as the latest version covered by that documentation, but this is a historical documentation statement, not evidence of current maintenance or support: PhantomJS CLI documentation. Record the actual version and platform when comparing output; do not assume an old build behaves identically across hosts.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

2. Check whether the page requested and loaded its fonts

A page can render with a fallback font when a remote font request fails, is blocked, or has not completed by the time the screenshot is taken. Inspect requests rather than assuming CSS is the problem. PhantomJS provides page.onResourceRequested and a resource timeout callback. Configure resourceTimeout before the initial page.open, because page settings apply during that opening request.

var page = require('webpage').create();
page.settings.resourceTimeout = 15000;

page.onResourceRequested = function (requestData, networkRequest) {
  console.log('Request: ' + requestData.url);
};

page.onResourceTimeout = function (request) {
  console.log('Resource timed out: ' + request.url);
};

page.onResourceReceived = function (response) {
  if (response.stage === 'end') {
    console.log('Response ' + response.status + ': ' + response.url);
  }
};

page.open('https://example.com', function (status) {
  console.log('Page open status: ' + status);
  if (status !== 'success') {
    phantom.exit(1);
    return;
  }
  page.render('shot.png');
  phantom.exit();
});

Replace the example URL with the page you are diagnosing. The request log may include many assets; identify the font URL by checking the page’s CSS or filtering the output for likely font extensions such as .woff, .woff2, .ttf, and .otf. A successful page-open callback alone does not establish that an arbitrary page’s remote fonts or asynchronous content are ready. The PhantomJS resource settings reference documents resource timeout behavior: WebPage settings.

3. Render only after the page is ready

The PhantomJS Quick Start and screen-capture examples open a page and then call page.render. For a real site, the important question is whether the page’s own content and font resources have finished loading before that call. A timeout value can prevent waiting indefinitely, but it does not make a failed font request succeed, and an arbitrary fixed delay is not proof that the font is ready.

Rank #2
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option

Use the resource callbacks above to establish what arrived and when. If the font request is pending or timing out, investigate the URL, network access, server response, and any proxy or request-blocking configuration in your environment. If the font request completes but the screenshot still shows a substitute, check that the family name in the page’s CSS matches the font available to the browser or installed on the host.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

4. On Linux, verify font installation and Fontconfig matching

On Linux, font availability is a host configuration issue as well as a page issue. Fontconfig handles font matching and fallback, so verify that the intended family is installed in the same environment where PhantomJS runs and visible to Fontconfig. This matters especially for a container, VM, or service account that may not share the fonts installed on an interactive desktop.

  1. Identify the exact family requested by the page’s CSS or font-face declaration.
  2. Check that the corresponding font files are installed on the rendering host and accessible to the PhantomJS process.
  3. Use Fontconfig’s tools to inspect available fonts and matching on that host, then refresh its cache if you have installed or changed font files.
  4. Repeat the capture and compare the resulting glyph shapes and line wrapping.

A commenter in a PhantomJS issue reported that installing the desired TTF files and running fc-cache -fv fixed a particular Linux font-substitution problem. Treat that as an environment-specific report, not a universal PhantomJS requirement or guaranteed repair: PhantomJS issue discussion. Fontconfig documentation explains the matching system, but does not certify that this command fixes every PhantomJS setup: Fontconfig user documentation.

Rank #3
Sale
Web Design with HTML, CSS, JavaScript and jQuery Set
  • Brand: Wiley
  • Set of 2 Volumes
  • A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers

5. Separate headless setup from font rendering

Do not add Xvfb just because text looks wrong. The PhantomJS FAQ says X11/Xvfb is needed only for PhantomJS 1.4 and earlier; from version 1.5 it describes PhantomJS as pure headless: PhantomJS FAQ. Display-server setup and font selection are different diagnostic questions. If an older environment needs Xvfb for its PhantomJS version, that does not itself establish why a specific font has been substituted.

6. Treat PDF output as a distinct problem

If the problem is a PDF rather than a PNG or other image, determine whether the issue is visual appearance, selectable text, or file size. A historical Linux issue discussion reports a case where a remote web font was associated with rasterized PDF text and a commenter described installing local TTF files as a workaround. That report concerns PDF text behavior; it does not prove that all screenshot font defects share the cause: PhantomJS issue discussion.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For image screenshots, the output is a rendering of the page; for PDFs, text representation and font embedding can raise additional concerns. Diagnose the remote font request and host font availability first, then evaluate the PDF’s text behavior separately rather than applying the reported PDF workaround indiscriminately.

7. Troubleshoot by symptom

Symptom Likely check What to do
The intended typeface is replaced consistently Host font availability, family-name match, and the actual PhantomJS binary Confirm the executable and version, then inspect Linux Fontconfig matching or the equivalent host font installation.
The font is correct sometimes and missing at other times Resource timing, intermittent request failure, and when page.render runs Log resource requests, received responses, and timeouts; capture only after the page’s required content has settled.
Only a remote-font page is affected Font URL response and access from the rendering host Check the requested font resource and host network path. Do not infer success from the page-open callback alone.
One machine renders differently from another PhantomJS version/build, operating system, and installed fonts Record the exact binary and environment on each machine; there is no established current compatibility matrix in the cited documentation.
Text looks wrong in a PDF, but image screenshots look acceptable PDF text output and the particular remote-font behavior Investigate PDF text/selectability separately; the historical issue report is not evidence of a universal image-capture fix.

8. Performance, reliability, and cost considerations

Logging requests and waiting for resources helps diagnose font readiness, but excessive timeouts or fixed delays can make a capture job slower without correcting an unavailable font. Keep a record of the font request outcome and capture timing when comparing runs. A screenshot captured before the needed font arrives can be internally consistent yet still show a fallback, so a successful process exit is not by itself a quality check.

The available PhantomJS sources are legacy documentation and historical community discussions. They do not establish a present-day OS compatibility matrix, current maintenance commitment, a universal font fix, or measured reliability figures. Keep those limits in mind when deciding whether a PhantomJS rendering environment remains appropriate for a production workflow.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

If maintaining a PhantomJS installation and debugging its host fonts is more work than the capture requires, ScreenshotNeo is a website screenshot API and MCP server. It cannot make an unsupported or unavailable font render as intended, but its response helps distinguish a successful capture from a bot check, blank page, timeout, failed load, or cache hit. The do-it-yourself PhantomJS checks above remain the right path when you need to diagnose that specific legacy renderer.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

One GET request can return a screenshot in PNG, JPEG, or WebP, or a PDF. For example, using cURL:

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

See the ScreenshotNeo API documentation for request parameters. ScreenshotNeo accepts cookie/consent banners as a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses include X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.

Sign up free for 1,000 screenshots a month, with no card required.

Frequently Asked Questions

Does a successful PhantomJS page.open mean the web font is ready?

No. Check the font’s resource request and capture timing; a successful open callback alone does not establish that every remote font has completed loading.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Is Xvfb a fix for PhantomJS font substitution?

No. The PhantomJS FAQ describes Xvfb as relevant only to PhantomJS 1.4 and earlier, not as a general font-rendering remedy.

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.