How to fix Puppeteer font issues

If you’ve been printing PDFs in Puppeteer for some time, you’ve no doubt encountered issues where fonts don’t render properly. Blotchy, pixelated, or even plain incorrect renderings are common when using headless browsers. Luckily, there are a few quick things you can do to fix your font in Puppeteer!

Use a special launch flag

The first thing to try out is to apply a --font-render-hinting flag. This value, which defaults to “full”, sets a font render hinting when running headless. Internally, this affects Skia rendering and whether glyph sub-pixel positioning is enabled. For the best possible experience, we recommend setting this to “none”, which can greatly improve kerning and letter spacing in your fonts.

//before
const browser = await puppeteer.launch();

//after
const browser = await puppeteer.launch({
  args: ['--font-render-hinting=none'],
});

Set a color profile

Chromium tries to keep your ink budget light by using special color profiles for your PDF’s. This is a good thing for the most part, but can result in colors of your PDF’s not coming through properly. To fix this, specify another launch flag — this time using the --force-color-profile switch.

Internally, this forces all monitors to be treated as though they have the specified color profile.u You’ll want to try a few to see what works best, and potential values are: srgb, generic-rgb, and color-spin-gamma24.

//before
const browser = await puppeteer.launch();

//after
const browser = await puppeteer.launch({
  args: ['--force-color-profile=srgb'],
});

Set a standard user-agent header so puppeteer respects your font

If you’re using a font service, like Google Fonts, many check your user-agent string to see what fonts your browser supports. While this optimization is nice for the majority of users out there, it may break your font since puppeteer applies its own user-agent that renders these WebFonts useless. To counter that, simply set a legitimate user-agent header:

// before
const browser = await puppeteer.launch();
const page = await browser.newPage();

// after
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36");

Wrapping up, your font should now work with puppeteer

With these three quick fixes, hopefully, your fonts are looking sharp in your PDFs. If you’re looking to generate PDFs without having to manage a headless browser, you should give our PDF API a shot! See more about that here.