I am looking for a way to change the font when displaying a string in a panel. Somehow the application of the ‘font-family’ style does not work (though I am not exactly sure if I am doing this right). The other css style options shown below are working. The default font is monospace, but I want to change it to something non-monospace.
pn.pane.Str(
'This is a raw string which \n'
'will not be formatted in any way \n'
'except for the applied style.',
styles={'font-family':'Times',
'font-size': '10pt',
'line-height': '120%',
'letter_spacing': '-1px'})
I.e. the font-family is set inside the Shadowroot (new in Bokeh 3.x/ Panel 1.x). Its set using the css variable --mono-font or even below that the --bokeh-mono-font. Thus you will have to set that via the stylesheets parameter.
import panel as pn
pn.extension()
STR_STYLE_SHEET = """
:host {
--bokeh-mono-font: Times;
}
"""
pn.pane.Str(
'This is a raw string which \n'
'will not be formatted in any way \n'
'except for the applied style.',
styles={'font-size': '20pt',
'line-height': '120%',
'letter-spacing': '-1px'}, stylesheets=[STR_STYLE_SHEET]).servable()