Changing Widgets Font

I am trying to figure out how to change widgets’ font family The only thing I managed to found was https://github.com/holoviz/panel/issues/773, but it did not seem to work. (perhaps because i was trying on RadioButtonGroups/Drop Downs/etc. and using wrong tag?) Any suggestions?

Welcome est987! I can really just recommend using your browsers developer console to play around with the CSS and then copy and pasting it into your code, e.g. to figure this out I just right-clicked on the widget:

Screen Shot 2020-06-11 at 1.19.44 AM

Then clicked the + icon in the developer console:

played with a few CSS rules and then copied and pasted it into my code:

import panel as pn

css = """
.bk.bk-btn.bk-btn-default {
    font-family: Ubuntu;
    font-weight: bold;
}
"""

pn.extension(raw_css=[css])
pn.widgets.RadioButtonGroup(options=['A', 'B', 'C'])

Screen Shot 2020-06-11 at 1.21.16 AM

2 Likes

Thank you, that did the trick. For some reason I am seeing the class with spaces instead of periods, but using periods instead of spaces solves the problem.