Highcharts export server doesn't display correct letter

[Andrey K]

Hello,

I have some misunderstanding with the Highcharts export server and font. I install the font 'Frutiger LT Pro 45 Light' on the 'window 10' machine and in the config of legend I wrote the fond 'Frutiger LT Pro 45 Light'. However, the letters 'a' and 'y' is wrong after the image generated in the legend (Please look at the attached image). I don't exactly understand, Why this problem appear and why just with 1 letter?

https://jsfiddle.net/gh/get/library/pur ... llopacity/

[dominik.c]

Hello Andrey K!

Welcome to our forum and thanks for contacting us with your question!

So the font has been loaded successfully except these two letters? That's really strange. How do you export the chart? Do you run your own server? If not, you need to remember that highcharts export server has a limited amount of available fonts to export, so that could be the reason of this problem.

Best regards!

[Andrey K]

Hello Dominik Chudy!
Thank you for your answer

Yes, you were right. I ran my own server. But I couldn't know how to check the count of available fonts and how to change or configure it in Highcharts. Is it possible that Highcharts you similar font or default? (Possibly, it's not a 'Frutiger')

[dominik.c]

Hi again!

Probably you didn't install the font on your server properly. Please get familiar with our documentation about the export server, over there you can find an instruction how to install fonts: https://github.com/highcharts/node-expo ... /README.md

Best regards!

[Andrey K]

Hello again!
Thank you for your answer and big sorry for the long answer

I have done installation by 'copy yourFont.ttf C:\Windows\Fonts\yourFont.ttf' for my windows server, but it has not made any changes.

[dominik.c]

Hi again!

Have you set your font properly in your config? Please check if you have set the proper name of the font.
If yes then please verify if your font is installed properly on your machine like that: https://www.pcmag.com/how-to/how-to-man ... ed%20fonts.

Best regards!

[Andrey K]

Hello, dominik.c!

I have checked the font in my server machine. The font was installed properly.
In my config, I am using the next font-family: "fontFamily": "Frutiger LT Pro 45 Light". This font-family name is the same as in font name from the preview (look at the attached image, please)

font.png (118.57 KiB) Viewed 350 times

Best regards!

[dominik.c]

Hi again!

Could you show me how you set the font-family in your demo? Maybe you need to set it globally in Highcharts.options like that: https://jsfiddle.net/BlackLabel/4mbso5g2/

Best regards!

[Andrey K]

dominik.c, thank you for your answer!

I think the export chart service doesn't recognize the font. when I have deleted the font-family from the config then the font is not a Frutiger, it is some default font but really similar (except some letters). Then I have added font-family and the (for example) letter 'a' has not changed.

Here I display how I write the font name in my config
https://jsfiddle.net/cae4qz9h/1/

in my .net core application, I use the next request with content , which I send to the export chart server:

Code: Select all

dynamic opt = new { infile = config, width = 640, type = "png" };

maybe I need to configure some specific configurations?

Best regards!

[dominik.c]

Hi again!

Could you try to install some other google font and check if it works for you? The font from the demo below is quite similar to the Frutiger font.

Demo: https://jsfiddle.net/BlackLabel/n0evgyts/

Best regards!

[Andrey K]

Hi, dominik.c!

I have downloaded the font 'Roboto Light' after have set this font into the config but it still doesn't work and uses some default font.

Best regards

[dominik.c]

Hi again!

It seems that the way how you install the fonts is wrong. Can you use them in some other projects not related to Highcharts? Please check it.

Additionally, can you tell me step by step how you create your Highcharts project? You ran the export server, right?

Best regards!

[Andrey K]

Hi again!

For the Windows system, I have just copied the font in the fonts folder. Should I do some other configurations (possibly global configurations?), in the docs https://github.com/highcharts/node-expo ... /README.md I have not found any other configuration for additional fonts. I check the font in Microsoft Word/PowerPoint the font exists and works after I have copied the font. (but 'Calibry' and 'Arial' font works).

About my export server: the server works under IIS with module iisnode, the script start index.js
config file

Code: Select all

<configuration>
	<system.webServer>
		<handlers>
			<add name="iisnode" path="index.js" verb="*" modules="iisnode" />
		</handlers>
       <rewrite>
      <rules>
        <rule name="myapp" patternSyntax="Wildcard">
          <match url="*" />
          <action type="Rewrite" url="index.js" />
        </rule>
      </rules>
    </rewrite>

	</system.webServer>
</configuration>

index.js file

Code: Select all

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

highcharts.initPool();
highcharts.startServer(process.env.PORT);

I start the project by IIS and send the request to the server

Best Regards!

[dominik.c]

Hi again!

Sorry for late response!

We've checked it for Windows 8.1 machine and it works fine. I suggest reinstalling this font one more time and check it also with another one.

Best regards!