Docker - Linux font rendering issue.

[Kuroosh]

Hi, if i try to render custom strings like 𝒱𝑒𝓃𝑜𝒳 𝒰𝓈𝑒𝓇 𝒫𝓇𝑒𝓋𝒾𝑒𝓌 - it won't be rendered on Linux. On Windows it works perfectly. Code to reproduce :

        ctx.font = `22px 'Cardo', 'SF Pro', BlinkMacSystemFont, Roboto, Helvetica, Arial,'AppleColorEmoji', 'Segoe UI', 'Segoe UI Emoji', 'Open Sans';`
        ctx.fillStyle = "#FFFFFF";
        ctx.textAlign = "center";
        ctx.fillText('𝒱𝑒𝓃𝑜𝒳 𝒰𝓈𝑒𝓇 𝒫𝓇𝑒𝓋𝒾𝑒𝓌', canvas.width / 2, 27);

How the result should look like ( works perfectly on Windows ) : https://media.discordapp.net/attachments/1057368561527566397/1059758881775038464/78390a3f-ea4c-46b2-a88c-9c4f886a6d36.png

How the result looks like on Linux - Docker : https://media.discordapp.net/attachments/1057368561527566397/1059758942219145256/d3acea17-c9aa-4a04-9c3c-57d14598ef99.png

And yes... i already added these to my dockerfile... :

RUN apt-get -y install locales
RUN echo "LC_ALL=en_US.UTF-8" >> /etc/environment
RUN echo "en_US.UTF-8 UTF-8" >> /etc/locale.gen
RUN echo "LANG=en_US.UTF-8" > /etc/locale.conf
RUN locale-gen en_US.UTF-8

And yes.. i already tried to load the fonts:

console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/ArialUnicode.ttf', 'ArialUnicode'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/Cardo-Regular.ttf', 'Cardo'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/segoeui.ttf', 'Segoe UI'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/seguiemj.ttf', 'Segoe UI Emoji'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/AppleColorEmoji.ttf', 'AppleColorEmoji'));

console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/arial.ttf', 'Arial'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/SF-Pro.ttf', 'SF Pro'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/Helvetica.ttf', 'Helvetica'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/OpenSans-Regular.ttf', 'Open Sans'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/ROBOTO-REGULAR.ttf', 'Roboto'));

Does someone have any idea why it makes so many problems with Docker / Linux ?

I hope someone can help me with that issue... thank you :) ♥

[Brooooooklyn]

@Kuroosh could you share your full Dockerfile?

[Kuroosh]

@Kuroosh could you share your full Dockerfile?

FROM node:16-bullseye

RUN apt-get update && apt-get -y install

RUN npm install -g npm@9.2.0

RUN apt-get install git

RUN npm install -g typescript

RUN useradd -m -d /home/venox venox

WORKDIR /home/venox

COPY ./ /home/venox

RUN apt-get -y install locales

RUN echo "LC_ALL=en_US.UTF-8" >> /etc/environment
RUN echo "en_US.UTF-8 UTF-8" >> /etc/locale.gen
RUN echo "LANG=en_US.UTF-8" > /etc/locale.conf
RUN locale-gen en_US.UTF-8

RUN chown -R venox:venox /home/venox 

RUN chmod -R 777 /home/venox

USER venox

RUN git config --global url."https://github.com/".insteadOf ssh://git://github.com/

docker-compose.yml :

services:
  testbot:
    build: .
    entrypoint: ["/bin/sh", "/entrypoint.sh"]
    environment:
      - SESSIONID=TEST_BOT
    volumes:
      - ./assets:/home/venox/assets
      - ./docker_node_modules:/home/venox/node_modules
      #- venoxdata:./home/venox/venoxdata
      - ./entrypoint.sh:/entrypoint.sh
    restart: unless-stopped

[Brooooooklyn]

@Kuroosh It seems your registered fonts 'Cardo', 'SF Pro', BlinkMacSystemFont, Roboto, Helvetica, Arial,'AppleColorEmoji', 'Segoe UI', 'Segoe UI Emoji', 'Open Sans' doesn't contain the character 𝒱𝑒𝓃𝑜𝒳 𝒰𝓈𝑒𝓇 𝒫𝓇𝑒𝓋𝒾𝑒𝓌. The reason why Windows works are @napi-rs/canvas loads system fonts and Windows contains hundreds of fonts with the system.

[Kuroosh]

@Kuroosh It seems your registered fonts 'Cardo', 'SF Pro', BlinkMacSystemFont, Roboto, Helvetica, Arial,'AppleColorEmoji', 'Segoe UI', 'Segoe UI Emoji', 'Open Sans' doesn't contain the character 𝒱𝑒𝓃𝑜𝒳 𝒰𝓈𝑒𝓇 𝒫𝓇𝑒𝓋𝒾𝑒𝓌. The reason why Windows works are @napi-rs/canvas loads system fonts and Windows contains hundreds of fonts with the system.

so what you would do in my case? load all system fonts from Windows ? any idea what i should do & how ? :D

Already tried with :

RUN wget http://ftp.de.debian.org/debian/pool/contrib/m/msttcorefonts/ttf-mscorefonts-installer_3.6_all.deb -P ~/Downloads

RUN apt install ~/Downloads/ttf-mscorefonts-installer_3.6_all.deb -y

RUN fc-cache -fv

didn't worked..

[Brooooooklyn]

You need to find a font which thatins 𝒱𝑒𝓃𝑜𝒳 𝒰𝓈𝑒𝓇 𝒫𝓇𝑒𝓋𝒾𝑒𝓌 characters and register it

[Kuroosh]

You need to find a font which thatins 𝒱𝑒𝓃𝑜𝒳 𝒰𝓈𝑒𝓇 𝒫𝓇𝑒𝓋𝒾𝑒𝓌 characters and register it

Well... i tried it with Arial Unicode MS... It even loads the font.. but it still doesn't display the special-letters...

the font is 100% loaded & works ( i can see the difference between old & new one ) but it still won't render any special characters?

It must work with Arial Unicode MS, but it still doesn't render these letters

[iFloneUEFN]

@Kuroosh Try this font: StixGeneral.