Custom font in exported chart

[RaTm7]

Good morning,

I have a chart with custom font. This font is defined in CSS (@font-face) on the website, so the integrated chart looks fine.
But when i try to export the chart (any format), the font is getting lost.
After long research i found out, that the SVG is sent over to your exporting-server and converted into the wished format. But since the SVG is not having the font definition, it cant export the chart exactly the way it is shown on the website. This happens also, when i go via local exporting (offline-exporting.js).

After some additional research, i found a solution, that i can modify the SVG and add the font in the <defs> tags. Highcharts is already using <defs> for <clipPath> so i need to add following:

Code: Select all

<style>
      @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");
</style>

Over all, when the SVG is sent over to your exporting server, the whole <defs> should look like that:

Code: Select all

  
  <defs aria-hidden="true">
    <clipPath id="highcharts-4285z2x-354-">
      <rect x="0" y="0" width="636" height="828" fill="none"></rect>
    </clipPath>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");
    </style>
  </defs>
  

Is there a way to modify the SVG before its sent over to you?

Additionally, are you thinking of making it possible to add font-definition via chart-configuration? I think

Code: Select all

Highcharts.setOptions()

would be good place to enable this possibility.

Kind regards,
Oleg

[sebastian.h]

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

In your case WebFont.loader looks to useful, give you the possibility to control when using linked fonts.
https://github.com/typekit/webfontloader

Code: Select all

WebFont.load({
  google: {
    families: ['Roboto']
  },
  active: function() {
    chart.update({
      chart: {
        style: {
          fontFamily: "Roboto"
        }
      }
    });
  }
});

Demo:
http://jsfiddle.net/BlackLabel/vehudsy4/

Let me know how are you going with this.
Best regards.

[RaTm7]

Hello Sebastian,

i think you got my problem wrong.

I set up fiddle :

https://jsfiddle.net/RaTm7/cb2uzf4j/

As you will see, i import custom font and the diagram looks the way it is supposed to.

If you look at the SVG of the chart (inside of HTML), you will see that the svg => defs => style imports the same font as i do in the fiddle.

Once you export the chart (go with SVG please) you will see, that the given definition inside of SVG is being lost.

Since i go via renderer of the chart object, i would assume that the definition is being passed on.


What i want to achieve:

I want that the exported chart has same font as the one i see in fiddle. You can see the difference if you look at the title (the small letter of L looks different).

If my approach is wrong, then please tell me, how i can add the definition of the font into the SVG so that its exported properly without loosing the font definition.

Best regards.

[sebastian.h]

Hi,

Now I understand your point, they should work when you import external font sources with CSS.
When exporting via JSFiddle, the export server doesn't have access to the CSS resource.

I think that should work in your case.
Best regards.

[RaTm7]

Good morning,

sadly it doesnt, you can see it in browser console. Once you export, the SVG is sent over to your export server (you can see the SVG transfered over to your server) and by then the SVG doesn't have the font i added to the chart object anymore.

The font i add is located on different server (not JSFiddle) and is accessable from everywhere.

In the last rows in the JS i add the CSS resource via Highcharts.Chart.renderer.definition(), so that its not only in the DOM, but also part of the chart object itself.
But when you send the data over to create SVG/Image on the exporting server, you ignore the given definitions. I would assume its a bug?

Below is reqest sent over to exporting server, there the <defs> tag is missing the style (containing the font) i added and looks like that:

------WebKitFormBoundarycoBlc8uJFPsTXYJ4
Content-Disposition: form-data; name="filename"

chart
------WebKitFormBoundarycoBlc8uJFPsTXYJ4
Content-Disposition: form-data; name="type"

image/svg+xml
------WebKitFormBoundarycoBlc8uJFPsTXYJ4
Content-Disposition: form-data; name="width"

1050
------WebKitFormBoundarycoBlc8uJFPsTXYJ4
Content-Disposition: form-data; name="scale"

2
------WebKitFormBoundarycoBlc8uJFPsTXYJ4
Content-Disposition: form-data; name="svg"

<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="highcharts-root" style="font-family:BundesSansWeb,Arial,Helvetica,sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="1050" height="800" viewBox="0 0 1050 800"><desc>Created with Highcharts 9.2.2</desc><defs><clipPath id="highcharts-uidl2hh-39-"><rect x="0" y="0" width="695" height="828" fill="none"></rect></clipPath></defs>.............................

Best regards

[RaTm7]

I copied the request of exporting and recreated it in JSFiddle:

https://jsfiddle.net/RaTm7/j082Lhrq/

Here you can see that if you would transfer the added definitions (via Highcharts.Chart.renderer.definition()), then it would work how its supposed to do, at least in SVG.
PNG, JPEG and PDF are ignoring the font even if you transfer it.


Regards

[sebastian.h]

Hi,
Thanks for the note, I need more tests and I will back to you with information.

Best regards.

[pascalh]

Hi
Is there any update on this problem, any solution in the meantime? We face the same problem on our linux server - the chart in png is somehow a default we don't understand. Our own fonts are placed in the folder as mentioned.
Thanks for any help!

[michal.f]

Hello, welcome to our forum and thanks for contacting us with your question!

Could you reproduce this in an online editor that I could work on? Because a few topics related to this have already appeared on the forum. For example this one: viewtopic.php?t=45571
And it is hard to tell you what is not working in your case and what could be done without taking look at your code.

Best regards!

[piotr.m]

Hi,

And are you using server export or default exporting?

Kind Regards