Why APITemplate.io Screenshots Show the Wrong Fonts and How to Fix It

If an APITemplate.io result uses the wrong font, first identify what you generated and which part looks wrong: a PDF body, PDF header or footer, image-template text, or an editor preview. Those paths use different font controls. Check the actual generated artifact as well as the preview, confirm the CSS family name, and verify that the renderer can load the font. There is no single fix that applies to every APITemplate workflow.

1. Identify the output and where the mismatch appears

Before changing CSS, note these three things:

Output: HTML-generated PDF, WYSIWYG PDF, image template, or a browser screenshot made with Puppeteer.
Region: PDF body, header/footer, or text element in an image template.
Stage: editor preview or final generated file.

This matters because PDF body styles do not necessarily control header/footer rendering, and image-template typography is configured through text elements. APITemplate’s HTML editor has a Quick Preview that renders HTML in the browser without a header or footer; generate the PDF with the saved settings to validate the final output. APITemplate HTML Template Editor documentation

2. Fix fonts in an HTML PDF body

Open the HTML PDF template and locate the CSS area used for styles in the template.
Check the exact font-family declaration, including spelling and fallback order.
If the font is hosted externally, confirm that the stylesheet and font file URLs are reachable by the rendering environment. A font that loads in your own browser may still fail in a remote renderer because of access controls, an invalid URL, or a missing stylesheet.
Generate a new PDF using the saved template settings, then inspect the PDF itself.

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', Arial, sans-serif;
}
</style>

This is an example of an external font stylesheet, not a guarantee that every remote font host is reachable from every account or rendering environment. If it falls back, verify the generated result and the font request in the relevant logs or browser network panel where available. The HTML template editor documentation describes external fonts in the CSS area. Source

Confirm the CSS family name

The CSS family name is not always the same as the font file name. If you are using a custom TTF, inspect the font’s family metadata and use that family name in CSS. Do not assume that a file named CompanySans-Regular.ttf should be declared as CompanySans-Regular; it may expose a different family name.

3. Fix fonts in PDF headers and footers

Headers and footers follow a separate path from the document body. APITemplate documents a <custom-font> tag for custom TTF fonts in these regions. Follow that documented mechanism and use the font’s actual family name rather than assuming a body stylesheet will apply in the same way. APITemplate PDF Headers and Footers documentation

Also compare the final generated PDF rather than relying on HTML Quick Preview: that preview excludes headers and footers, so it cannot confirm how those areas render.

4. Fix text in an image template

If the affected output is an image generated from an APITemplate image template, inspect the font setting on the specific text element in the Image Template Editor. Regenerate the image through the corresponding editor or API workflow after changing that setting. PDF CSS is not evidence that an image-template text element will use the same font controls. See the Image Template Editor documentation and text-to-image API guide.

5. If you control the Puppeteer renderer

For a Puppeteer workflow you operate, wait for web fonts to finish loading before capturing. APITemplate’s Puppeteer guidance shows await waitFor('document.fonts.ready', 2000); as a way to wait for fonts. Adapt the wait to your own Puppeteer version and code structure; this is advice for a Puppeteer-controlled workflow, not an APITemplate hosted-product API parameter.

// In a Puppeteer-controlled workflow, after navigating to the page:
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'capture.png', fullPage: true });

For Puppeteer-generated headers and footers, APITemplate’s article says that this path does not support web fonts. Use a compatible local/custom-font approach for that region, or adjust the layout so the typography is part of the page content where appropriate. The limitation is specific to the Puppeteer header/footer workflow described in the article. APITemplate Puppeteer PDF guidance

6. Verify the actual result

Save the template and any CSS changes.
Generate a fresh PDF or image with the same settings and inputs used for the affected output.
Inspect the generated file, including headers and footers where relevant.
If the font is still wrong, confirm the CSS family name, the font URL or custom TTF setup, and whether the rendering environment can access the resource.
Keep a known-good fallback in the CSS stack so the document remains readable if the preferred font is unavailable.

A preview can help catch layout issues, but it is a separate validation stage from the generated artifact. APITemplate documents Quick Preview as an instant browser render without header/footer; use the generated PDF to check the final output.

Common errors and fixes

Symptom	Likely cause	What to check
Browser preview looks right, final PDF does not	The preview and PDF use different rendering stages or settings	Generate the PDF with saved settings; check the affected region in the file itself.
PDF body uses a fallback font	Font stylesheet or font file did not load, or the CSS family name is wrong	Check the URL, renderer access, CSS inclusion, and family spelling.
Only the header or footer is wrong	That region has its own custom-font mechanism or renderer limitation	Use APITemplate’s documented TTF `<custom-font>` setup; in Puppeteer, account for its header/footer web-font limitation.
Image text ignores the PDF font CSS	The output is an image template with separate text-element settings	Set the font on the image text element and regenerate.
Intermittent or late fallback during a controlled browser capture	The capture starts before fonts finish loading	In your own Puppeteer code, wait for `document.fonts.ready` before capture.
Custom TTF appears to be ignored	The declared CSS family does not match the TTF’s internal family name, or the region is not configured with the documented mechanism	Inspect font metadata and follow the header/footer custom-font instructions where applicable.

Linux and serverless Puppeteer: check the environment you control

If you run Puppeteer on a Linux or serverless host that you control, the available local fonts and font configuration can affect rendering. APITemplate’s Puppeteer article discusses configuring a fonts directory in that context. Check installed fonts and fontconfig in your own runtime when you rely on local fonts. This does not establish that an APITemplate customer can change operating-system fonts on APITemplate’s managed service, so do not apply host-level changes there without a supported configuration path.

Performance, reliability, and cost considerations

Font loading adds a dependency. A remotely hosted stylesheet and font must both be available to the renderer. For repeatable output, use a font delivery method supported by the workflow and validate generated files after changes.
Wait only as long as needed. In a Puppeteer workflow, waiting for font readiness avoids capturing before fonts are ready; an arbitrary long delay adds latency without proving that a missing font can load.
Keep fallbacks. A sensible system-font fallback preserves legibility when an external resource is unavailable.
Separate output costs from diagnosis. The supplied APITemplate documentation does not establish pricing or cost for retries, so check your account’s current plan and usage terms before repeatedly regenerating large batches.

Or skip the browser setup

For a direct website screenshot, ScreenshotNeo is a website screenshot API and MCP server. Its endpoint returns an image or PDF from one GET request. This does not replace APITemplate’s template-specific PDF or image workflows; it is an alternative when you need to capture a rendered website.

cURL:

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

Python:

import 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)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

See the ScreenshotNeo API documentation for options. Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, no card required.

FAQ

Does changing the CSS always fix the wrong font?

No. First determine whether the output is a PDF body, PDF header/footer, image template, or browser capture. Each can use a different font path.

Can Quick Preview prove that the final PDF header font works?

No. APITemplate documents that Quick Preview omits the header and footer. Generate the PDF and inspect those regions.

Can I use a web font in a Puppeteer PDF header or footer?

APITemplate’s Puppeteer guidance says its generated headers and footers do not support web fonts. That statement applies to the Puppeteer workflow described there.

Is the font filename the CSS family name?

Not necessarily. Check the TTF’s internal family name and use the appropriate documented setup for the output region.