Arabic font is not rendered properly inside puppeteer

I am trying to take a screenshot of my website inside puppeteer, but the font is not printed properly, I am using a custom font. I checked from the log, the request to get the font is successfully done.

I have tried to wait until the 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 docker file

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 puppeteer@1.10.0

RUN mkdir -p /app
WORKDIR /app
COPY ./ /app/

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

and here is my code

 await page.goto(
        `${frontend}/index(print:index/print/${query})`,
        {
            waitUntil: "networkidle0",
            timeout: 300000
        }
    );
    await page.evaluateHandle('document.fonts.ready');
    await page.emulateMedia("print");
    await page.waitForSelector(".data-complete", { timeout: 100000 });
    await page.pdf({
        path: "reporter/report.pdf",
        format: "A4"
    });
    console.log("Reports generation done");

    await browser.close();

This is how it looks like inside docker

[AhmedBHameed]

Small update as addition to @semoal

For Arabic use only, you can install only those two packages fonts-kacst fonts-freefont-ttf. So script will be

RUN  apt-get update \
     && apt-get install -y wget gnupg ca-certificates \
     && 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 \
     # We install Chrome to get all the OS level dependencies, but Chrome itself
     # is not actually used as it's packaged in the node puppeteer library.
     # Alternatively, we could could include the entire dep list ourselves
     # (https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md#chrome-headless-doesnt-launch-on-unix)
     # but that seems too easy to get out of date.
     
     
     && apt-get install -y google-chrome-stable fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
     
     
     && rm -rf /var/lib/apt/lists/* \
     && wget --quiet https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh -O /usr/sbin/wait-for-it.sh \
     && chmod +x /usr/sbin/wait-for-it.sh

Thanks for the support everyone.

[semoal]

Probably you need to install some custom fonts on your docker file.

RUN set -x \
&& apk update \
&& apk upgrade \
&& apk add --no-cache \
udev \
ttf-freefont \
chromium \

on this line, search arabic font compatibility package for alpine

On node 10 for example:

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/*
...