Puppeteer doesn't render default fonts

Hello,

I was trying to generate jpg or pdf, but is fails on fonts. I’ve made this example URL: https://www.myfeesy.com/foo.html with this code example:

 <html>
 <body>
 FOOOO <span style="font-family: Impact, Charcoal">impact</span>
 <span style="font-family: 'Courier New', Courier, monospace">courier</span>
 </body>
 </html>

Local render (OS X) works like a charm, everything is great:

But when I follow this readme: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker (or any other, believe me, spend with that more hours than I want), the result is as following, fonts are weird (both courier and impact, even for PDF, doesn’t matter):

example

Dockerfile is exactly the same as in the example, puppeteer.js is:

'use strict';

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.myfeesy.com/foo.html');

    await page.screenshot({path: '/home/pptruser/Downloads/example.png'});
    await page.pdf({
        path: '/home/pptruser/Downloads/example.pdf',
        format: 'A4'
    });

    await browser.close();
})();

and generate by:

docker run -i -d --cap-add=SYS_ADMIN \                   
   --name puppeteer-chrome feesy-render \
   node -e "`cat puppeteer.js`"

Then just docker cp puppeteer-chrome:/home/pptruser/Downloads ./foo to copy and take a look.

It looks like it doesn’t render fonts right, but only when in Docker container.

Does anybody know when the problem can be?

Thank you very much.

Jakub

Issue Analytics

State:
Created 6 years ago
Reactions:8
Comments:7 (2 by maintainers)

Top GitHub Comments

6reactions

xgqfrmscommented, Oct 9, 2018

CentOS 7 & Puppeteer

test ok


# root
$ yum groupinstall "Chinese Support"
$ yum groupinstall "Font"

4reactions

HydraOrccommented, Feb 27, 2019

@KromDaniel, for a proper letter-spacing try ‘–font-render-hinting=none’ or ‘–font-render-hinting=medium’

Top Results From Across the Web

How to fix puppeteer font issues - browserless docs

The first thing to try out is to applying a --font-render-hinting flag. This value, which defaults to "full", sets a font render hinting...

Adding fonts to Puppeteer PDF renderer - Stack Overflow

Using Docker allows us to install what we need. We have seen a lot of people have problems getting their fonts to render...

Puppeteer documentation - DevDocs

puppeteer -core doesn't automatically download Chromium when installed. ... NOTE Extensions in Chrome / Chromium currently only work in non-headless mode.

PuppeteerPdf — Puppeteer PDF v1.0.4 - HexDocs

This is a wrapper to NodeJS module puppeteer-pdf. ... Display independent render (for better testing how template will be). ... (Defaults to 5000)...

Web Scraping with a Headless Browser: A Puppeteer Tutorial

As we mentioned above, browsers do know how to process the JavaScript and render beautiful web pages. Now, what if we could leverage...