[SOLVED] Using custom fonts with Highcharts

Using custom fonts with Highcharts

I am trying to apply 3rd party typography fonts to Highcharts line graphs, like to X/Y axis labels, X axis titles, tooltips regular and bold, plotlines labels, etc. I think, it should be done via CSS classes, like use class="abc-body-small" or "abc-body-small-heavier" (instead of b tag ) for a font/style, probably inside TS file which defines chartOptions.

Could someone please show how to do it? (using Highcharts6 with Angular6)

TIA, Oleg

Solution

With fonts, you can append the css-styles as is shown in this fragment of code:

Example:

var newStyle = document.createElement('style');

newStyle.appendChild(document.createTextNode("\
@font-face {\
  font-family: 'Pacifico';\
  font-style: normal;\
  font-weight: 400;\
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v13/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2');\
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\
}\
"));

document.head.appendChild(newStyle);

Check these sources for more information: