Imported font and Highcharts JS export

Question

Is it possible to export an imported font
( like Google webfonts or an own .ttf fontface ) with Highcharts?

As you can see in this fiddle

if you try to export it uses a standard font.

title: {
   style: { 
      color: '#000',
      fontFamily : 'Patrick Hand SC'
          }
       }

I have also tried it with a local .ttf fontface but I cannot change the export font.

Answer 1

First of all you should understand why it doesn't work.

If you use font on the website, browser is trying to find the font with a given name installed on your computer or imported with @font-face.

But when you export the chart Highcharts takes the SVG code, sends it to the server, server rasterizes SVG image into jpg, png or any format you asked for and sends it back to you.

The problem now is that your custom font is missing on the server, and you can't use @font-face here. Only way to do it, is to install font on the server, but since you're using default Highcharts exporting server, you can't install anything there.

What you can do is to set up your own exporting server and install the font that you need.