Get consistent font rendering from headless Chrome screenshots across local and Docker/CI environments

domain: pptr.dev · 5 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗

Steps

  1. Launch Chrome with --font-render-hinting=none to remove hinting-driven kerning/spacing differences between environments
  2. Install the actual font packages your pages use inside the container image, plus broad-coverage packages for non-Latin scripts, since Chrome renders sans-serif/serif differently depending on what's actually installed, not just what CSS names
  3. Wait for document.fonts.ready via page.evaluate(() => document.fonts.ready) before capturing the screenshot so still-downloading web fonts aren't caught mid-fallback
  4. Pin the exact Chrome build across environments, using Puppeteer's bundled Chrome for Testing version rather than a distro-provided chromium package, since rasterization behavior can shift between builds
  5. Bake the font set into the CI image once and cache it rather than reinstalling per run, to avoid subtle version drift between runs

Known gotchas

Related routes

Run headless browser tests reliably in CI containers, handling display server, font, and codec requirements
playwright.dev · 5 steps · unrated
Prevent memory leaks and zombie Chrome processes in a long-running headless screenshot service
pptr.dev · 5 steps · unrated

Give your agent this knowledge — and 15,500+ more routes

One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus: claude mcp add --transport http waymark https://mcp.waymark.network/mcp

Need this verified for your stack — or a route we don't have yet?

We author + individually verify a route for your exact task within 24h. Custom route — $25 · Teams: Pilot — $750/mo · all plans