puppeteer: [Bug]: `Page.printToPDF` fails when using custom fonts in PDF `headerTemplate` or `footerTemplate`.

Bug expectation

When using custom font in headerTemplate or footerTemplate, Page.printToPDF fails with the following error: Protocol error (Page.printToPDF): Printing failed

Example custom font in <style> tags:

@font-face {
  font-family: MyFont;
  font-weight: 100 400;
  font-display: swap;
  src: url('https://cdn.myWebsite.com/assets/MyFont.woff2') format('woff2');
}

Expected: PDF to be printed with font styles applied to header and footer.

Bug behavior

Flaky
PDF

Minimal, reproducible example

import puppeteer from 'puppeteer';

const contentWithCustomStyles = `
<html>
	<style>
		@font-face {
			font-family: MyFont;
			font-weight: bold;
			src: url('https://ppubs.uspto.gov/pubwebapp/static/assets/fonts/public-sans/PublicSans-Bold.woff2') format('woff2');
		}

		body {
			font-family: "MyFont";
		}
	</style>
	<body>
		Test Content
	</body>
</html>
`;

const pdfOptions = {
	format: 'A4',
	scale: 1,
	printBackground: true,
	margin: {
		top: 0,
		bottom: 0,
		left: 0,
		right: 0,
	},
	displayHeaderFooter: true,
	headerTemplate: contentWithCustomStyles,
	footerTemplate: contentWithCustomStyles,
};

(async () => {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setContent(contentWithCustomStyles, { waitUntil: 'networkidle0' });
	const pdf = await page.pdf(pdfOptions);
	await browser.close();
	return pdf;
})();

Error string

Protocol error (Page.printToPDF): Printing failed

Puppeteer configuration

No response

Puppeteer version

20.7.2

Node version

18.15.0

Package manager

npm

Package manager version

9.5.0

Operating system

macOS

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 15

Most upvoted comments

@OrKoN - I’ve managed to find out what’s going on for my end.

It works for me if content and the headerTemplate/footerTemplate uses the data uri. If content loads fonts from remote source while headerTemplate/footerTemplate uses the data uri, it’ll still fail with the same error.

I’ll try a few combinations to see if I can create the issue minimally. https://gist.github.com/zthng/ab2cf8219269faaf16ebde80417e8872

zthng on Jun 21, 2023