Google Font Barlow Semi Condensed not rendering in chart

[m-cisse-easy-live]

Hello, I would like to report a bug concerning the use of a Google font not being taken into account. I wanted to use the Barlow Semi Condensed font and apply it to the generated graphics. However, the font is not taken into account, despite the fact that I followed the librarian's README recommendations. Please note that I'm running the server on Windows 10 with Node version 18.17.1 Thank you in advance for your help.

Expected behaviour

Generating a graphic with the Barlow Semi Condensed font

Actual behaviour

Generate a graphic in Highchart's default Helvetica font

Reproduction steps

Install with the following command

npm i highcharts-export-server@3.1.1

Install google font and copy font .ttf to C:\Windows\Fonts\

copy yourFont.ttf C:\Windows\Fonts\yourFont.ttf

Create custom script server.js

const exporter = require("highcharts-export-server");

const start = async () => {
  const options = exporter.setOptions({
    "highcharts": {
        "version": "11.1.0"
    },
    "export": {
        "type": "svg",
        "constr": "chart",
        "height": 1125,
        "width": 1500,
        "globalOptions": {
            style: {
                "fontFamily": "Barlow Semi Condensed, sans-serif",
                "fontSize":"1rem"
            }
        }
    }
  });

  await exporter.initPool(options);

  await exporter.startServer({
    "enable": true,
    "host": "127.0.0.1",
    "port": 7801,
    "ssl": {
        "enable": false,
        "force": false,
        "port": 443,
        "certPath": ""
    },
    "rateLimiting": {
        "enable": false,
        "maxRequests": 50,
        "skipKey": "",
        "skipToken": ""
    }
  });
};

start();

Run custom script

node server.js

Do a cURL request on the current HTTP server

curl --location 'http://127.0.0.1:7801' \
--header 'Content-Type: application/json' \
--data '{
    "infile": {
        "title": {
            "text": "Steep Chart"
        },
        "xAxis": {
            "categories": [
                "Jan",
                "Feb",
                "Mar"
            ]
        },
        "series": [
            {
                "data": [
                    29.9,
                    71.5,
                    106.4
                ]
            }
        ]
    }
}'

[pixelspark]

This is happening here as well, but only when exporting to SVG. Exporting to PNG or JPEG renders the font correctly.

Dockerfile:

FROM node:lts-alpine
ENV NODE_ENV=production
ENV HIGHCHARTS_VERSION=11.4.0
ENV SERVER_ENABLE=true
ENV SERVER_SSL_ENABLE=false
ENV SERVER_PORT=7801
ENV SERVER_HOST=0.0.0.0

RUN apk add --no-cache \
    chromium \
    nss \
    freetype \
    harfbuzz \
    ca-certificates \
    ttf-freefont \
    nodejs \
    yarn

ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
RUN npm install highcharts-export-server -g
COPY ./run.sh /run.sh
RUN chmod +x /run.sh
EXPOSE 7801
# RUN chown -R node /usr/src/app
# USER node
CMD ["/run.sh"]

run.sh:

#!/bin/sh
ls /usr/share/fonts/truetype
fc-cache -fv
highcharts-export-server --enableServer 1

To PNG:

To SVG:

The SVG file is attached. Note how it renders the text as <text> but fails to mention the custom font ('Bitter' in my test case).

chart_svg.txt

[m-cisse-easy-live]

is happening here as well, but only when exporting to SVG. Exporting to PNG or JPEG renders the font correctly.

Dockerfile:

Hello,

I've also tested this, and I have the same problem as you. The font is defined in the svg file but the svg can't find the font on its own. And the only solution I've found so far is to import the stylesheet css associated with the Google font by overloading the tag :

<svg version="1.1" class="highcharts-root" style="font-family: &quot;Barlow Semi Condensed&quot;; font-size: 1rem;" xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" aria-hidden="false" aria-label="Interactive chart">
  <desc aria-hidden="true">Created with Highcharts 11.1.0</desc>
  <defs aria-hidden="true">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900');
    </style>
     ...
  </defs>
  ...
</svg>

Here found the generated SVG file:

Here found the modified SVG file: Github doesn't seem to be able to load the font in the preview of the SVG file, but if you download it you should see that the font applies well to the svg