How do I use custom font in Holoviews?

UPDATE: I just noticed, that this is only applied when browser is refreshed after initial visit.
This code imports a font (from a url) that is applied to holoview’s gridmatrix and hv.table:

import bokeh
from bokeh.themes.theme import Theme
from bokeh.sampledata.iris import flowers

import panel as pn
import holoviews as hv
from holoviews.operation import gridmatrix

FONT = "source sans pro"
theme = Theme(
    json = {
    "attrs": {
        "Axis": {
            "major_tick_line_alpha": 0,
            "major_tick_line_color": "#3C3E42",

            "minor_tick_line_alpha": .5,
            "minor_tick_line_color": "#3C3E42",

            "axis_line_alpha": 0,
            "axis_line_color": "#3C3E42",

            "major_label_text_color": "#3C3E42",
            "major_label_text_font": FONT,
            "major_label_text_font_size": "1.025em",

            "axis_label_standoff": 10,
            "axis_label_text_color": "#3C3E42",
            "axis_label_text_font": FONT,
            "axis_label_text_font_size": "1.03em",
            "axis_label_text_font_style": "normal",
            "axis_label_text_align": "left",
            "axis_label_text_baseline": "top",
        },

        "Title": {
            "text_color": "#3C3E42",
            "text_font": FONT,
            "text_font_size": "1.15em"
        }
    }
})

css = '''
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

// html is needed for gridmatrix's diagonal plot at left-bottom position
html {
    overflow: hidden;
    font-family: 'Source Sans Pro', sans-serif !important;
}
.bk-root {
    font-family: 'Source Sans Pro', sans-serif !important;
}
'''

hv.extension('bokeh')
hv.renderer('bokeh').theme = theme
pn.extension(raw_css=[css], comms='vscode')

print('holoviews: ', hv.__version__)
print('panel:     ', pn.__version__)
print('bokeh:     ', bokeh.__version__)
# holoviews:  1.14.1
# panel:      0.10.2
# bokeh:      2.2.3

iris_ds = hv.Dataset(flowers, kdims=['sepal_length','sepal_width','petal_length','petal_width'])

grid = gridmatrix(iris_ds).opts(title='Flowers - Block #123')

table = hv.Table(iris_ds)

pn.Row((grid + table)).servable(title='Demo font loading')

Although subtle in appearance compared to default font, compare the ‘l’ in Flowers and ‘g’ in length. Source sans pro is shown in bottom portion of image.

1 Like