How to change font in `pn.pane.Str`?

Panel
1

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'})
2

Hi @Jan

If you inspect the Styles you will see

image
image1489×663 71.3 KB

You can click the <style> tag to the left of my red arrow and navigate to

image
image1487×733 81.1 KB

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()

You can learn more about styling components in Apply CSS — Panel

My personal thoughts on the new styling is reported here #5321

3

Thank you for this very detailed explanation about what is going on here and how to fix it. The code block that you shared works.

1 Like