Use Adobe Fonts’ generated project CSS in the page you give to wkhtmltoimage. For ordinary Latin text, this CSS-only embed is the most reliable path and does not need JavaScript. If your project uses Adobe’s JavaScript embed (for example, dynamic subsetting for East Asian text), enable JavaScript and add a post-load delay with --enable-javascript and --javascript-delay, or the equivalent IMGKit options.
The font must be configured in a published, site-specific Adobe Fonts project, and your CSS must use the exact generated family name, weight and style. The examples below cover URL and local HTML input, command-line wkhtmltoimage, IMGKit, network and CSP checks, diagnostics, and a browser-free alternative.
What you need before converting
- An Adobe Fonts (formerly Typekit) web project for the domain being rendered.
- The required families, weights and styles added to that project.
- The project published so its generated CSS or JavaScript embed is available from Adobe’s CDN.
- A wkhtmltoimage build that can reach the external stylesheet and font files. Old Qt/WebKit packages can differ in their support for modern remote font-service behavior.
- IMGKit installed if you are calling wkhtmltoimage from Python.
A project is site-specific. Configure the hostname used by the page, publish the project, and copy the embed generated by Adobe rather than typing a family name from memory.
Choose CSS-only or JavaScript embedding
| Approach | Use it when | Renderer settings | Main trade-off |
|---|---|---|---|
| Generated CSS link | Ordinary Latin web fonts and normal @font-face delivery |
No JavaScript is required; allow external resources | Usually simpler and faster, but the stylesheet and font requests must be reachable |
| Adobe JavaScript kit | Dynamic subsetting, including some East Asian web-font delivery, or code that needs font-loading callbacks | Enable JavaScript and wait after navigation with --javascript-delay or IMGKit’s javascript-delay |
Asynchronous loading can capture fallback text if the delay is too short |
The JavaScript loader can run after the document starts rendering. A screenshot taken before the kit and its font requests settle may contain a flash of unstyled text. There is no universal delay value: network speed, page complexity, font count and the particular wkhtmltoimage build all affect the required wait.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches#1 Best Overall
Configure the Adobe Fonts project
- Create or open the web project in Adobe Fonts, add every family and variant needed by the page, and publish it.
- Copy the generated CSS embed link into the source document’s
<head>. Adobe’s current default embed is a stylesheet served fromuse.typekit.net. - Use the exact family name, numeric weight and style that appear in the generated CSS. A near match such as a wrong family spelling, an unavailable 600 weight or an omitted italic variant causes fallback rendering.
- Load the page in a regular browser first. Confirm that the intended face is active before debugging the conversion process.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="YOUR_GENERATED_ADOBE_CSS_URL">
<style>
body {
font-family: "YOUR_GENERATED_FAMILY", sans-serif;
font-weight: 400;
font-style: normal;
}
h1 { font-weight: 700; }
</style>
</head>
<body>
<h1>Rendered with the Adobe Fonts project</h1>
</body>
</html>Replace the placeholder link and family with the values generated for your project. Do not guess the CSS URL or family name.
Convert a remote page with IMGKit
Start with CSS-only loading. IMGKit forwards wkhtmltoimage options, so the important requirements are UTF-8 encoding and permission for the renderer to fetch the page’s external resources.
import imgkit
options = {
"encoding": "UTF-8",
}
imgkit.from_url("https://example.com/card", "card.png", options=options)If the page uses Adobe’s JavaScript kit, enable JavaScript and add a delay after navigation:
import imgkit
options = {
"enable-javascript": None,
"javascript-delay": "2000",
"encoding": "UTF-8",
}
imgkit.from_url("https://example.com/card", "card.png", options=options)2000 means 2,000 milliseconds, not seconds. Treat it as a starting point, then increase it only until the generated image consistently contains the intended face. A longer delay increases latency for every successful capture.
Rank #2
Run wkhtmltoimage directly
The command-line equivalent is useful for isolating whether a problem comes from Python or from the renderer itself.
wkhtmltoimage
--enable-javascript
--javascript-delay 2000
--encoding UTF-8
https://example.com/card card.pngFor CSS-only projects, omit the JavaScript flags:
wkhtmltoimage
--encoding UTF-8
https://example.com/card card.pngRun the command from the same host, user account and network environment used by your application. A browser on your workstation may have proxy credentials, DNS access or cached resources that the conversion worker does not.
Convert local HTML and local assets
When the input HTML references local CSS, images or fonts, wkhtmltoimage blocks those file reads unless local-file access is explicitly enabled. IMGKit exposes the corresponding flag:
import imgkit
options = {
"enable-local-file-access": None,
"encoding": "UTF-8",
}
imgkit.from_file("/srv/cards/card.html", "/srv/output/card.png", options=options)Prefer an explicit allow-list for production jobs rather than opening every local path:
import imgkit
options = {
"allow": ["/srv/cards", "/srv/assets"],
"encoding": "UTF-8",
}
imgkit.from_file("/srv/cards/card.html", "/srv/output/card.png", options=options)IMGKit documents list or tuple forms for repeatable options such as allow, custom-header, cookie and run-script. Grant only the directories required by the page; local-file access can expose files to untrusted HTML.
Make the font settle without wasting time
Use the smallest dependable delay
Measure from the slowest environment that will run the job. A delay that works on a warm developer laptop may fail on a cold worker. Increase the delay in small steps and compare output images, not just process exit codes.
Prefer CSS-only when it meets the requirement
The generated stylesheet avoids a JavaScript dependency and removes one asynchronous stage. Keep the JavaScript kit only when dynamic subsetting or application callbacks are actually needed.
Keep page work predictable
Large pages, blocked third-party requests and heavy scripts all compete with font loading. Capture a minimal print view when possible, and avoid an unnecessarily long global delay for pages that already use CSS-only delivery.
Recommended Free Tools
Rank #4
Content-security policy and network requirements
A restrictive CSP must permit the Adobe endpoints used by the embed. Adobe documents these allowances:
script-src ... use.typekit.netfor the JavaScript kit.style-src ... use.typekit.net, including the inline-style allowance required by the generated embed.img-src ... p.typekit.net.connect-src performance.typekit.netis optional for performance metrics.
The conversion host also needs outbound DNS and HTTPS access, and any corporate proxy must be configured for the wkhtmltoimage process. An old packaged Qt/WebKit build may fail TLS negotiation or behave differently from a current browser. If remote loading cannot be made dependable, a licensed self-hosted @font-face asset is an engineering fallback; verify that your font license permits server-side rasterization.
Diagnose fallback fonts and blank captures
| Symptom | Likely cause | Fix |
|---|---|---|
| Image uses a system fallback | Family name, weight or style does not match the generated CSS | Copy the exact generated names and variants into your page CSS; confirm the requested weight exists in the project. |
| Browser is correct, image is fallback | Font requests are still pending when the capture occurs | Use the JavaScript kit only when needed, enable JavaScript, and increase javascript-delay; inspect the renderer log. |
| JavaScript kit never activates | JavaScript disabled, CSP blocked, or the network cannot reach Adobe | Enable JavaScript, allow the documented endpoints, check DNS/proxy/TLS from the worker, and test the generated stylesheet URL. |
| Local CSS or images disappear | Local-file access is disabled | Add enable-local-file-access or a narrowly scoped allow path. |
| Conversion exits successfully but content is blank | Navigation timed out, a bot check appeared, or a page script failed | Open the URL from the same host, enable JavaScript debugging, inspect stderr, and remove or accommodate blocking scripts. |
| Only one weight falls back | The project does not contain that weight/style or CSS requests an unsupported value | Add the variant to the Adobe project, republish it, and use the published family/weight/style combination. |
| Results vary between workers | Different wkhtmltoimage builds, network paths or cached resources | Pin the renderer build, run from a consistent network, and use a delay based on the slowest worker. |
Use wkhtmltoimage’s JavaScript debugging and verbose output when available. The controls expose what the renderer attempted, but they cannot guarantee that every legacy WebKit build supports every remote font-service behavior.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Operational and cost considerations
- Latency: CSS-only captures generally avoid the extra JavaScript settling period. JavaScript captures trade throughput for a delay long enough to receive and apply the font.
- Reliability: Remote fonts add DNS, TLS, proxy and CDN dependencies. A licensed self-hosted font removes that network dependency but adds asset deployment and license-management work.
- Security: Keep local-file access and
allowpaths narrow, especially when HTML can be supplied by users. - Reproducibility: Pin your wkhtmltoimage package and conversion flags, and record the Adobe project’s published variants so a later project edit does not silently change typography.
- Validation: Compare rendered pixels or inspect representative glyphs at each required weight and script. A zero exit status alone does not prove that the web font was applied.
Or skip the browser setup
If you only need a clean image or PDF from a URL, ScreenshotNeo provides a single HTTP capture endpoint. It accepts the page as a visitor would: cookie and consent banners are handled first, then more than 60 known consent platforms, newsletter popups and chat widgets are removed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
Free tools Windows power users keep installed
One-click scans. No signup required.
See the ScreenshotNeo API documentation for all options, including full-page lazy-image loading, CSS-selector element capture, dark mode, device presets and arbitrary viewports, retina scale, PDF paper and page controls, custom CSS or JavaScript, clicks, selector or network-idle waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, configurable TTL caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage reporting and the OpenAPI specification.
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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}`);ScreenshotNeo also has an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. Every plan includes every feature: 1,000 screenshots per month are free with no card; paid plans start at $5 for 3,000, with yearly billing providing two months free. Create a free ScreenshotNeo account to try the endpoint.
FAQ
Frequently Asked Questions
Do I need to allow performance.typekit.net for the fonts to render?
No. Adobe lists that endpoint as optional for performance metrics. The stylesheet, script and image allowances required by your chosen embed are the parts that affect loading.
Can wkhtmltoimage run the Adobe kit if JavaScript support was disabled in its build?
No. A build without usable JavaScript support cannot execute the kit. Use the generated CSS embed for ordinary web fonts or choose a renderer with JavaScript support when dynamic subsetting is required.
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.
