CODEWITHSUNDEEP
node.jsdockerfontspuppeteer
palAlaa
palAlaa

Reputation: 9858

Downloading fonts is not supported in dockerized puppetter

I am trying to take screenshot of my website inside puppetter, but the font is not printed properly, I am using a custom font. I am not sure if this line of code is not executing inside puppetter!

<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto:300,400,500,600,700" rel="stylesheet">

I have tried to wait until document's font is ready, but still not working, the font still not applied 

await page.evaluateHandle('document.fonts.ready');

I am using puppeteer built-in chromium browser. Also I am using docker-compose, and I am giving sys_admin to cap_addattribute to this service .

Here is my dockerfile

FROM node:10.7.0-alpine AS base
ENV CHROME_BIN="/usr/bin/chromium-browser" \
    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"
RUN set -x \
    && apk update \
    && apk upgrade \
    && apk add --no-cache \
    udev \
    ttf-freefont \
    chromium \
     && npm install [email protected]

RUN mkdir -p /app
WORKDIR /app

COPY ./ /app/

ENTRYPOINT ["npm"]
CMD ["start"]

This is how it looks like inside docker

enter image description here

That is how the font in chrome

enter image description here

Upvotes: 1

Views: 2325

Answers (1)

palAlaa
palAlaa

Reputation: 9858

I post an issue on puppetter github account, and they said, it's probably chromium doesn't provide full support for all Arabic font, and they suggest to install chrome inside the container.

FROM node:10-slim

# Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
# installs, work.
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
&& sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
&& apt-get update \
&& apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
  --no-install-recommends \
&& rm -rf /var/lib/apt/lists/*

Upvotes: 1

Related Questions