Bokeh Text.text_font options

I am using Bokeh to create dynamic visualizations for all the publications in our new Open Policy group. I have successfully been able to match all the color guidelines in this most recent publication. Below is a code example. I am running this using Bokeh v2.4.3. But I verified that I have the same questions/problem in Bokeh v3.0.3.

import numpy as np
from bokeh.plotting import figure, show

# Plot a little line with four points
title_text = "My font test Bokeh plot"
fig = figure(title=title_text, height=300, width=600, toolbar_location=None)
fig.line(x=np.array([1, 2, 3,4]), y=np.array([1, 3, 2, 2.5]), line_width=5)

# Format the title text
fig.title.text_font_size = '20pt'
fig.title.text_color = '#434244'
fig.title.text_font = 'times'

show(fig)

This code results in the following figure.

font_test1236×622 31.5 KB

But I have not been able to change the font for the text in these figures beyond a few examples that I could find, e.g., text_font=['helvetica', 'times', 'arial']. And I cannot find anywhere in the Bokeh documentation that gives a list of the font options available in the Text.text_font() method. So I have two questions.

1. Is there anywhere in the Bokeh source code or documentation where I can go to see what font options are available in Text.text_font()?
2. Is there any way for me to load a custom font, such as the Google Font “Open Sans”?

@rickecon Bokeh ultimately uses HTML canvas fillText and strokeText APIs, and AFAIK any font that is loaded in the page should be acceptable to pass. What would really help focus the discussion is a complete Minimal Reproducible Example that we can actually inspect and investigate directly.

cc @mateusz I thought there was an issue/PR about custom fonts on plots from awhile back, but I was not able to find it.

Thanks @Bryan. I will put up a minimal reproducible example by tonight.

In here might be a reference to the GH issue w the google fonts. No idea if it’s been resolved etc.

Thanks @gmerritt123 that was the issue I was trying to find (not sure why it didn’t turn up searching for “font load” )

@rickecon Please do also specify what version of Bokeh you are using, and Ideally, confirm that the issue is present on the latest version (3.0.3) in case you had been using something older.

@Bryan and @gmerritt123. Thanks for the responses. I updated my initial comment with my Bokeh version (v2.4.3), that I get the same behavior/question in Bokeh v. 3.0.3, and a minimal reproducible code example.

In the thread that @gmerritt123 referenced above in which @Bryan is responding to a question by @gmerritt123, it seems like the solution is to use the jinja2.Template class with the bokeh.themes.Theme method.

Can you give an example in the simple code I posted above that would make my title text be in the Google Font “Open Sans”?

@rickecon Nothing to do with theming, but you would need (I think) a page template that loads the font so that it is accessible. See javascript - Supported fonts in HTML5 Canvas text - Stack Overflow specifically:

According to the HTML Living Standard by WHATWG, the Canvas API allows use of any font that can otherwise be used by the user agent with a CSS stylesheet,

So, e.g. any of the browser built-in fonts described here work for me out of the box. But if you are using some external font, the page needs to load it up front. I don’t have any example specifically with font loading handy. You can find general docs for embedding Bokeh content into page templates here:

https://docs.bokeh.org/en/latest/docs/user_guide/output/embed.html

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.