Help with how to use a custom font via a ttf file

[chrisHassan]

Hi,

I'm trying to use the custom Google Fonts VT323 and Share Tech Mono on my Mac.

I have confirmed that:

1. The .ttf files are installed in ~/Library/Fonts/.
2. The fonts appear in Font Book.
3. The fonts are found and printed by matplotlib.font_manager.findSystemFonts.

However, Altair doesn't seem to recognise them when I specify the font name (I suspect it falls back to a default font).

How can I correctly tell Altair to recognise and use these installed custom fonts?

Minimal Reproducible Example

Below is the code I'm using to test the fonts. 'Courier New' works, but 'VT323' and 'Share Tech Mono' do not appear to:

repeated_sentence = "A B C D E F G H I J K L M N O P"

fonts = [
    "VT323",
    "Share Tech Mono",
    "Courier New"
]

n_fonts = len(fonts)
sentences = [
    f"{font}: {repeated_sentence}"
    for font in fonts
]

# data
chart_df = pd.DataFrame({
    'x': [0] * n_fonts,
    'y': list(range(n_fonts))[::-1],
    'text': sentences,
    'font': fonts
})


def plot_chart(row) -> alt.Chart:
    single_row_df = pd.DataFrame([row]).drop(columns=['Index'])
    font_name = row.font
    text_content = row.text

    chart = alt.Chart(single_row_df).mark_text(
        font=font_name,
        align='left',
        fontSize=20,
        xOffset=-100
    ).encode(
        text=alt.Text('text:N'),
    )
    return  chart   

chart_list = []

for row in chart_df.itertuples():
    chart = plot_chart(row)
    chart_list.append(chart)
final_chart = alt.vconcat(*chart_list).configure_view(
    stroke=None
)
final_chart

I'm going through this new r book https://nrennie.rbind.io/art-of-viz/programming-languages.html that uses ggplot and replicating the charts there using Altair. It's helpful to be able to use custom fonts.

[mattijn]

This works for me in VSCode (had to do a restart after installing the font):

import altair as alt
# from altair.datasets import data  # altair development version
from vega_datasets import data

# define, register and enable theme
@alt.theme.register("my_custom_font", enable=True)
def my_custom_font() -> alt.theme.ThemeConfig:
    font = "VT323"
    
    return {
        "config" : {
             "title": {'font': font},
             "axis": {
                  "labelFont": font,
                  "titleFont": font
             },
             "header": {
                  "labelFont": font,
                  "titleFont": font
             },
             "legend": {
                  "labelFont": font,
                  "titleFont": font
             }
        }
    }


# draw the chart
cars = data.cars.url
point = alt.Chart(cars, height=100, width=100, title='MY TITLE').mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
)

repeated_sentence = "A B C D E F G H I J K L M N O P"
text = alt.Chart().mark_text(align='left', baseline='bottom', size=10, font='VT323').encode(
    text=alt.value(repeated_sentence),
    x=alt.datum(100),
    y=alt.datum(20),
)

point + text

See also: https://altair-viz.github.io/user_guide/customization.html#defining-a-custom-theme

[chrisHassan]

Thanks for taking the time to confirm the above, and confirming how to do so using custom themes. I can confirm I can now plot charts with the custom fonts. I’m not sure why it wasn’t working yesterday - as I had saved them to the system fonts - but everything seems to be working fine today. So strangely, it works today without needing to use custom themes. And I also added a new font "Honk" to double check! And everything works fine, which is grand.