How do I use custom font in Holoviews?

I would like to change the font of my holoviews plots

  1. I would like to change my font to a “known” font like Verdana. How would I do that?
  2. I would like to use the custom font-family:OrstedSansRegular, sans;. This is what is used at in my company. I have the source files

image

Let’s take an example

import pandas as pd
import hvplot.pandas
data = {"x": [1,2], "y": [2,3]}
dataframe = pd.DataFrame(data)
dataframe.hvplot(x="x", y="y")

I would like to change the font for all text. How do I do that?

In the end I would deploy this in a Panel application.

I can see that I can change the font via a custom Template.

In the example below I change to Comic Sans MS.

from bokeh.themes.theme import Theme
theme = Theme(
    json={
    'attrs' : {
        'Figure' : {
            'background_fill_color': ORSTED_TEXT_DIGITAL,
            'border_fill_color': ORSTED_TEXT_DIGITAL,
            'outline_line_color': ORSTED_TEXT_DIGITAL,
        },
        'Grid': {
            'grid_line_dash': [6, 4],
            'grid_line_alpha': .3,
        },
        'Text':
            {
                'text_font': 'Courier',
            },
        'Axis': {
            "major_label_text_font": "Comic Sans MS",
            "axis_label_text_font": "Comic Sans MS",
            'major_label_text_color': ORSTED_WHITE,
            'axis_label_text_color': ORSTED_WHITE,
            'major_tick_line_color': ORSTED_WHITE,
            'minor_tick_line_color': ORSTED_WHITE,
            'axis_line_color': ORSTED_WHITE,
        }
    }
})
hv.renderer('bokeh').theme = theme

I’ve tried in a notebook to change the font to a custom font using CSS. But I cannot get the holoviews plot to use it. Panel uses it nicely though.

from bokeh.themes.theme import Theme
import hvplot.pandas
import holoviews as hv
theme = Theme(
    json={
    'attrs' : {
        'Figure' : {
            'background_fill_color': "rgb(59,73,86)",
            'border_fill_color': "rgb(59,73,86)",
            'outline_line_color': "rgb(59,73,86)",
        },
        'Grid': {
            'grid_line_dash': [6, 4],
            'grid_line_alpha': .3,
        },
        'Text':
            {
                'text_font': 'OrstedSansRegular',
                'text_color': "OrstedSansRegular"
            },
        'Axis': {
            "major_label_text_font": "OrstedSansRegular",
            "axis_label_text_font": "OrstedSansRegular",
            'major_label_text_color': "white",
            'axis_label_text_color': "white",
            'major_tick_line_color': "white",
            'minor_tick_line_color': "white",
            'axis_line_color': "white",
        }
    }
})
hv.renderer('bokeh').theme = theme

import pandas as pd
import hvplot.pandas
data = {"x": [1,2], "y": [2,3]}
dataframe = pd.DataFrame(data)
dataframe.hvplot(x="x", y="y")

CSS = """
@font-face {
  font-family: "OrstedSansRegular";
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.eot");
  /* IE9 Compat Modes */
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.eot?#iefix") format("embedded-opentype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.woff") format("woff"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.ttf") format("truetype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.svg#52bc9fd504b621176d57f308965c98a4") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400;
}
"""
style=f"""
<style>
{CSS}
div.orsted {{
    font-family: OrstedSansRegular
}}
</style>
<div class="orsted">Orsted</div>
"""
import panel
panel.Column(panel.pane.HTML(style), panel.Pane(dataframe.hvplot(x="x", y="y").options(title="Orsted"))).show()

And here is an extended version that does not work either. But i’ve included all the italic fonts etc. And in the title you can see how numbers look according to the Orsted font.

from bokeh.themes.theme import Theme
import hvplot.pandas
import holoviews as hv
theme = Theme(
    json={
    'attrs' : {
        'Figure' : {
            'background_fill_color': "rgb(59,73,86)",
            'border_fill_color': "rgb(59,73,86)",
            'outline_line_color': "rgb(59,73,86)",
        },
        'Grid': {
            'grid_line_dash': [6, 4],
            'grid_line_alpha': .3,
        },
        'Text':
            {
                'text_font': 'OrstedSansRegular',
                'text_color': "OrstedSansRegular"
            },
        'Axis': {
            "major_label_text_font": "OrstedSansRegular",
            "axis_label_text_font": "OrstedSansRegular",
            'major_label_text_color': "white",
            'axis_label_text_color': "white",
            'major_tick_line_color': "white",
            'minor_tick_line_color': "white",
            'axis_line_color': "white",
        }
    }
})
hv.renderer('bokeh').theme = theme

import pandas as pd
import hvplot.pandas
data = {"Orsted": [1,2], "y": [2,3]}
dataframe = pd.DataFrame(data)
plot=dataframe.hvplot(x="Orsted", y="y").options(title="Orsted")

CSS = """
@font-face {
  font-family: "OrstedSansRegular";
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.eot");
  /* IE9 Compat Modes */
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.eot?#iefix") format("embedded-opentype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.woff") format("woff"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.ttf") format("truetype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Regular.svg#52bc9fd504b621176d57f308965c98a4") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "OrstedSansLight";
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Light.eot");
  /* IE9 Compat Modes */
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Light.eot?#iefix") format("embedded-opentype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Light.woff") format("woff"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Light.ttf") format("truetype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Light.svg#52bc9fd504b621176d57f308965c98a4") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: "OrstedSansBold";
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Bold.eot");
  /* IE9 Compat Modes */
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Bold.eot?#iefix") format("embedded-opentype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Bold.woff") format("woff"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Bold.ttf") format("truetype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Bold.svg#52bc9fd504b621176d57f308965c98a4") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: "OrstedSansBlack";
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Black.eot");
  /* IE9 Compat Modes */
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Black.eot?#iefix") format("embedded-opentype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Black.woff") format("woff"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Black.ttf") format("truetype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Black.svg#52bc9fd504b621176d57f308965c98a4") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 900;
}
@font-face {
  font-family: "OrstedSansItalic";
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Italic.eot");
  /* IE9 Compat Modes */
  src: url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Italic.eot?#iefix") format("embedded-opentype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Italic.woff") format("woff"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Italic.ttf") format("truetype"), url("https://orstedcdn.azureedge.net/Assets_/dist/fonts/OrstedSans-Italic.svg#52bc9fd504b621176d57f308965c98a4") format("svg");
  /* Legacy iOS */
  font-style: italic;
  font-weight: 400;
}
"""
style=f"""
<style>
{CSS}
div.orsted {{
    font-family: OrstedSansRegular
}}
</style>
<div class="orsted">Orsted 1.2 1.4 1.6</div>
"""
import panel
panel.config.sizing_mode="stretch_width"
panel.Column(panel.pane.HTML(style), panel.Pane(plot)).show()

Sorry to hijack this thread, but how do you include another font in the first place? I.e. how do you discover font files/fonts installed on the computer and specify using them in holoviews?

Well i believe its about fonts available in the browser. Not nescessarily about installed fonts.