Chromeless: Missing Fonts

[caloskao]

I tried demo page to get Taiwan google homepage screenshot, but the content have encoding problem.

[schickling]

Interesting! Is that running locally or on Lambda?

[caloskao]

Is on Lambda.

[adieuadieu]

I think this is an issue upstream in @serverless-chrome/lambda. The headless Chrome binary is probably missing Chinese fonts.

Related: #63

[toddwprice]

We have seen this issue as well. Here's an example that reproduces the issue:

https://chromeless.netlify.com/#src=const%20chromeless%20=%20new%20Chromeless(%7B%20remote:%20true%20%7D)%0A%0Aconst%20screenshot%20=%20await%20chromeless%0A%20%20.goto('http://www.163.com/')%0A%20%20.scrollTo(0,%202000)%0A%20%20.screenshot()%0A%0Aconsole.log(screenshot)%0A%0Aawait%20chromeless.end()

As far as I can tell the issue here is that the default container that AWS runs Lambda functions inside of does not contain a suitable font for rendering these glyphs. We had the same issue running phantomjs in Lambda and could not find a workaround there either.

Is it in fact possible to embed a font such as Google Noto into the Chrome binary itself? Apart from that I believe we would need to lobby AWS to include the correct fonts in their containers.

[adieuadieu]

@toddwprice —

As far as I can tell the issue here is that the default container that AWS runs Lambda functions inside of does not contain a suitable font for rendering these glyphs.

That's exactly right.

I'm not sure about embedding the fonts directly into the binary. I'm not familiar enough with the font-related stuff in the Chromium codebase but I suspect it would probably be a hack to embed the Noto fonts.

It might be possible bundle the font in the deployment package and set some env flag pointing to them, somehow. As far as I'm aware, Chrome looks for fonts in standard places, and maybe that place can be configured (or—hardcoded in Chromium's code.)

The solution I've used in the past for phantomjs was to inject the Noto web-font into the page I wanted to screenshot/pdf-print. That's perhaps an opt-in feature for Chromeless—and also still kind of a hack.

[toddwprice]

I'm not sure about embedding the fonts directly into the binary. I'm not familiar enough with the font-related stuff in the Chromium codebase but I suspect it would probably be a hack to embed the Noto fonts.

I'm going to at least take a look at whether this is possible or not. It sounds painful even if possible.

It might be possible bundle the font in the deployment package and set some env flag pointing to them, somehow. As far as I'm aware, Chrome looks for fonts in standard places, and maybe that place can be configured (or—hardcoded in Chromium's code.)

We tried this approach with phantomjs on Lambda and could not get it to work. It could be that Chrome --headless has options here that phantomjs did not though, this so is another possible path forward.

The solution I've used in the past for phantomjs was to inject the Noto web-font into the page I wanted to screenshot/pdf-print. That's perhaps an opt-in feature for Chromeless—and also still kind of a hack.

This seems like the least painful option. In general I try to avoid changing the DOM of the underlying page though. Still, it's an option for Chromeless that could be useful if we can get it reliably working.

[2507779542]

@toddwprice
can you solve the problem?

[toddwprice]

@2507779542 I'm working on it upstream in @serverless-chrome/lambda. See this issue: https://github.com/adieuadieu/serverless-chrome/issues/49

[chemitaxis]

Related #166