3

I am wondering if it's possible to install fonts to use in altair to use in alt.TitleParams. For this example, without font specified, I get a default font and size.

import altair as alt
import pandas as pd

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

alt.Chart(source, title = alt.TitleParams(text = 'Example Chart')).mark_bar().encode(
    x='a',
    y='b'
)

enter image description here

Changing the font size I get the bigger letters:

alt.Chart(source, title = alt.TitleParams(text = 'Example Chart', fontSize=24)).mark_bar().encode(
    x='a',
    y='b'
)

enter image description here

But, when I add a font style, the size doesn't work anymore:

alt.Chart(source, title = alt.TitleParams(text = 'Example Chart'
                                          , fontSize=24
                                          , fontStyle = 'Arial')).mark_bar().encode(
    x='a',
    y='b'
)

enter image description here

And the text looks always the same regardless of what font is specified:

alt.Chart(source, title = alt.TitleParams(text = 'Example Chart'
                                          , fontSize=24
                                          , fontStyle = 'Calibri')).mark_bar().encode(
    x='a',
    y='b'
)

Same thing:

enter image description here

I would like to know how I can display the correct font, not only with standard fonts, but with non-standard ones and how to install them.

flbyrne
  • 181
  • 1
  • 9

1 Answers1

4

fontStyle refers to the style of the font, such as "bold", "italic", etc. If you want to specify a font by name, use the font parameter:

alt.Chart(
    source,
    title=alt.TitleParams(
        text='Example Chart',
        fontSize=24,
        fontStyle='italic',
        font='Times'
    )
).mark_bar().encode(
    x='a',
    y='b'
)

enter image description here

joelostblom
  • 43,590
  • 17
  • 150
  • 159
  • How do I install fonts other than the standard ones? I am trying to use graphik, but it defaults to Times. – flbyrne Aug 15 '22 at 14:28
  • @flbyrne I think fonts need to be available on you local file system to be used in Altair/Vega. Although this answer seem to suggest that it is possible to include fonts via CSS but I don't have experience with that myself https://stackoverflow.com/questions/59122012/vega-lite-font-availability#61901333 – joelostblom Aug 15 '22 at 16:47
  • thanks again @joelostblom. I haven't been able to make it work for my google cloud app. It may be a problem with that, so I will ask that question. – flbyrne Aug 16 '22 at 20:54