2

I was wondering if there is a list of supported fonts used by Vega Lite? I didn't manage to find in the docs but maybe missed in.

Specifically I am trying to use museo sans 300, which works fine in my D3.js code, but doesn't seem to be recognised in Vega Lite.

Is there a way to link to custom font files?

zylatis
  • 448
  • 3
  • 14
  • 1
    Answer to Q3 in this link shows how to configure fonts in Vega-Lite https://stackoverflow.com/questions/45326497/vega-lite-bar-chart-space-between-bars. Font related configurations are available in most configurations like ```axis``` (label and title), ```text``` mark etc. Here are some references in the documents. https://vega.github.io/vega-lite/docs/axis.html#labels https://vega.github.io/vega-lite/docs/text.html#labels – CS. Dec 02 '19 at 06:48
  • Thank you ! In the end it turned out to be because of the order of loading things onto the webpage, now resolved. Thanks for input. – zylatis Dec 03 '19 at 03:21

1 Answers1

1

The way I get custom fonts for Vega Lite charts in my website is simply via CSS!

First: Define a font in your CSS

@font-face {
    font-family: MyFont;
    src: url(fonts/somefont.ttf);
}

Second: Refer to the font name in your Vega Lite configs

axis : {
titleFont: "MyFont"
}

Hope this helps, this is not directly related to your goal from question but still gives you ability to do custom fonts inside the chart.

Cortex
  • 585
  • 3
  • 19
  • Thanks for posting this. I have tried this in a google cloud app but it's not working. It works for any text I write on the html, but not for the text on the chart. I wonder if you could share additional details. – flbyrne Aug 16 '22 at 21:46