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 in Lets-Plot 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, when I try to use them in geom_text(), they do not render correctly (I suspect they fall back to a default font).

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

How can I correctly tell Lets-Plot 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",          # Make sure this matches the PostScript/Family name
    "Share Tech Mono", # name confirmed using font_manager.findSystemFonts
    "Courier New"
]

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

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

# Create the chart
chart = ggplot(data, aes(x='x', y='y', label='text', family='font')) + \
    geom_text(size=10) + \
    scale_y_continuous(expand=[0.5, 0.5]) + \
    theme_void() + \
    theme(
        axis_text=element_text(size=0),       # hide axis text
        axis_title=element_text(size=0),
        panel_grid_major=element_text(size=0),        
        panel_background=element_text(color='white')
    ) + \
    ggtitle("Custom Fonts Validation")

# Display the chart
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 Lets-Plot. It's helpful to be able to use custom fonts

[chrisHassan]

Digging more into this, I discovered how this can be accomplished using plotnine from reading the following article https://ivelasq.rbind.io/til-python/plotnine-fonts

Below is badly written code that accomplishes it in plotnine

# 1) load fontproperties
font_name_to_font_prop: dict[str, font_manager.FontProperties] = {}
for font_name in ["VT323", "ShareTechMono"]:
    src = Path("fonts") / font_name / f"{font_name}-Regular.ttf"
    font_name_to_font_prop[font_name] = font_manager.FontProperties(fname=src)

font_name = "Courier New"
font_name_to_font_prop[font_name] = font_manager.FontProperties(family=font_name)



# 2 ) plot chart


repeated_sentence = "A B C D E F G H I J K L M N O P"
repeated_sentence += ' ' + repeated_sentence.lower()

fonts = list(font_name_to_font_prop.keys())

n_fonts = len(fonts)

sentences = [
    f"{font}: {repeated_sentence}"
    for font in fonts
]

df = pd.DataFrame({'x': [1], 'y': [1]})

def create_styled_text_chart(text_content: str, font_prop: font_manager.FontProperties):
    chart = (
        ggplot(df, aes(x='x', y='y')) 
        + geom_blank()
        + labs(subtitle=text_content) # Text goes into the subtitle
        + theme_void() 
        + theme(
            plot_subtitle=element_text(
                fontproperties=font_prop, 
                size=20, 
                ha='left', # Horizontal alignment
                va='center'  # Vertical alignment
            ),
            panel_background=element_rect(fill='white', colour='white'),
            figure_size=(12, 2.5)
        )
    )
    return chart


list_of_charts: list[ggplot] = []

for sentence, font_name in zip(sentences, fonts):
    font_prop = font_name_to_font_prop[font_name]
    chart = create_styled_text_chart(sentence, font_prop)
    list_of_charts.append(chart)

concatenated_chart = list_of_charts[0] / list_of_charts[0] / list_of_charts[1] / list_of_charts[2]
concatenated_chart

[alshan]

Hi, the problem is that the browser cannot access local font files from ~/Library/Fonts/ directly. Browser can access fonts installed at the system level or Web fonts loaded via CSS.

In a Jupyter notebook, you can load Google Web Fonts like this:

from IPython.display import HTML

HTML("""
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
</style>
""")

After running this cell, the fonts should be available for use in your plots with family="VT323" or family="Share Tech Mono".

[chrisHassan]

Thanks for taking the time to confirm the above. Good to know the HTML approach works as well. 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. And I also added a new font "Honk" to double check! And everything works fine, which is grand.