# How to change font\_name and font\_size of labels of the checkboxgroup widget

**URL:** <https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886>\
**Category:** Community Support\
**Created:** [May 28, 2021, 7:10am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886 "2021-05-28T07:10:09Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [May 28, 2021, 7:10am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/1 "2021-05-28T07:10:09Z")

</div>

Hi,

I would like to change the font\_name and font\_size of the labels for my checkboxgroup widgets. I know we can change the size(height/width) of the widget but it does not affect the label size.

Below is a simple example.

```
from bokeh.plotting import output_file, show
from bokeh.models.widgets import CheckboxGroup
from bokeh.layouts import layout

checkbox_group1 = CheckboxGroup(labels=['Yandi'], active=[], background='red', margin=(0, 0, 2, 0), height=15, max_width=80)
checkbox_group2 = CheckboxGroup(labels=['Tom Price'], active=[], background='blue', margin=(0, 0, 2, 0))
checkbox_group3 = CheckboxGroup(labels=['Hope Downs 1'], active=[], background='green', margin=(0, 0, 2, 0))

l = layout([
    [[checkbox_group1, checkbox_group2, checkbox_group3]],
])

output_file("checkbox_groups.html", title="checkbox groups", mode='inline')
show(l)

```

Is it possible to change the size and font of the labels?

Thanks

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [May 28, 2021, 9:09pm UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/2 "2021-05-28T21:09:56Z")

</div>

There is not currently and API to control this. The only means would be to target CSS. You can add CSS classes to the widgets setting the `css_classes` property on them, then using CSS rules to change the appearance. You could provide a custom output template with your stylesheet to use with [`file_html`](https://docs.bokeh.org/en/dev/docs/user_guide/embed.html#html-files) or alternatively you should be able to set the `css_raw` property of the BokehJS resources you are using (inline or cdn) to add CSS rules.

Edit: here is a concrete example of employing `css_classes`:

> <https://github.com/bokeh/bokeh/blob/branch-2.4/examples/plotting/file/css_classes.py>

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [June 1, 2021, 12:48am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/3 "2021-06-01T00:48:07Z")

</div>

Hi Brian,

I ran the example above but I am not sure what the output should be. I get the following output:

 ![image](https://discourse-uploads.bokeh.org/original/2X/4/4c785e7a8c678e5e0dc1a9f7a3474d3b47a421c9.png)

I am assuming that the texts should have border and colours. Is that right?  
Have you got a screenshot of the output?  
I am using Bokeh 2.3.1 and the browser is Microsoft Edge.

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [June 15, 2021, 2:36am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/4 "2021-06-15T02:36:39Z")

</div>

Hi Brian,

Did you see my comment above?

Thanks  
Gilles

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [June 15, 2021, 7:26pm UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/5 "2021-06-15T19:26:56Z")

</div>

@Gilles When I run the example on OSX it looks like this:

 ![Screen Shot 2021-06-15 at 12.26.06](https://discourse-uploads.bokeh.org/original/2X/0/05a5c6a71f71fdc78426491923dfdcef471c890c.png)

Perhaps there is a bug specific to Windows or Edge. Are there any errors reported in your browser console?

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [June 16, 2021, 12:03am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/6 "2021-06-16T00:03:21Z")

</div>

@Bryan We tested on Windows + Chrome, Windows + Firefox and Linux Firefox. They all show the same result (no border and background colour). And there is no error displayed on the browser console.

This is the script copied from the link above:

```auto

from bokeh.plotting import figure, output_file, show

from bokeh.io import save

from bokeh.layouts import column

from bokeh.models import Div, Paragraph

from bokeh.util.browser import view

template = """

{% block postamble %}

<style>

.bk.custom {

    border-radius: 0.5em;

    padding: 1em;

}

.bk.custom-1 {

    border: 3px solid #2397D8;

}

.bk.custom-2 {

    border: 3px solid #14999A;

    background-color: whitesmoke;

}

</style>

{% endblock %}

"""

p = Paragraph(text="The divs below were configured with additional css_classes:")

div1 = Div(text="""

<p> This Bokeh Div adds the style classes:<p>

<pre>

.bk.custom {

    border-radius: 0.5em;

    padding: 1em;

}

.bk.custom-1 {

    border: 3px solid #2397D8;

}

</pre>

""")

div1.css_classes = ["custom", "custom-1"]

div2 = Div(text="""

<p> This Bokeh Div adds the style classes:<p>

<pre>

.bk.custom {

    border-radius: 0.5em;

    padding: 1em;

}

.bk.custom-2 {

    border: 3px solid #14999A;

    background-color: whitesmoke;

}

</pre>

""")

div2.css_classes = ["custom", "custom-2"]

#output_file("css_classes.html", title="css_classes", mode='inline')

#show(column(p, div1, div2), template=template)

save(column(p, div1, div2), template=template)

view("css_classes.html", new='tab')

```

Unfortunately I cannot attach the html file produce by the script.  
I copied the exact code in the link above. Did I need to change anything?  
I am quite supprise that it does not work neither o Windows and Linux!

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [June 16, 2021, 12:15am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/7 "2021-06-16T00:15:34Z")

</div>

I had a closer look to the browser (Edge) console outputs and there are the following issues:

 ![image](https://discourse-uploads.bokeh.org/original/2X/4/494d686e114da92731d26c6546b13038755eabd8.png)

I am not sure if it is the problem.

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [June 16, 2021, 12:30am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/8 "2021-06-16T00:30:33Z")

</div>

> [@Gilles](#):
>
> I am quite supprise that it does not work neither o Windows and Linux!

@Gilles The code above also functions as expected for me on ubuntu 20.04 with Bokeh 2.3.2:

 ![image](https://discourse-uploads.bokeh.org/original/2X/d/d699f55132ad26ecbc7a8991b6370cb294538a43.png)

I’ll try Windows later if I have time, but I’m not really sure what to suggest to you, at this point.

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [June 16, 2021, 12:47am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/9 "2021-06-16T00:47:31Z")

</div>

@Gilles this also works for me on Win10 / Edge with Bokeh 2.3.2

 ![image](https://discourse-uploads.bokeh.org/original/2X/3/37fa806bca6f7c27efcf8b45b73f8d128812b525.png)

I’m not sure what but I am fairly certain whatever issue you are seeing is somehow specific to the environment you are in.

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [June 16, 2021, 1:38am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/10 "2021-06-16T01:38:29Z")

</div>

@Bryan ok I have updated my bokeh from 2.31 to 2.3.2 and it looks ok.  
Before closing this discussion I would like to make it work for my original issue (change font-size and front-colour of the labels of the checkboxgroup widgets).

Thanks for your help. I let you know how I went this the checkboxgroup widgets

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [June 16, 2021, 2:29am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/11 "2021-06-16T02:29:27Z")

</div>

@Bryan I get my original issue sorted using the property (as you mentioned above) “.css\_classes” of the checkboxgroup widgets.

Thanks a lot.  
Gilles

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [July 8, 2021, 1:40am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/12 "2021-07-08T01:40:44Z")

</div>

@Bryan, how can I achieve this solution on a bokeh server? I need to set this template after the server has started (on the fly). The “Document” class has a property “Template”, can it be used for that purpose? Or this property is set when the server fired up using the index.html file in the folder Template?

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [July 8, 2021, 1:51am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/13 "2021-07-08T01:51:50Z")

</div>

> [@Gilles](#):
>
> I need to set this template after the server has started (on the fly).

This is not possible, I am afraid. The template is rendered (once) when the session is opened.

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [April 17, 2023, 5:30am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/14 "2023-04-17T05:30:18Z")

</div>

> [@Bryan](#):
>
> [https://github.com/bokeh/bokeh/blob/branch-2.4/examples/plotting/file/css\_classes.py](https://github.com/bokeh/bokeh/blob/branch-2.4/examples/plotting/file/css_classes.py)

@Bryan

The “css\_classes.py” example does not seem to work anymore with Bokeh 3.1.0. I cannot find an updated version of this file for 3.1.0.

Can you please advise if this script should still work in Bokeh 3.1.0. If it does not , would it be possible to have an updated example.

Thanks  
Gilles

---

<div class="post-metadata">

**Author:** ![gmerritt123](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/gmerritt123/32/4101_2.png) [@gmerritt123](https://discourse.bokeh.org/u/gmerritt123)\
**Post date:** [April 17, 2023, 1:00pm UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/15 "2023-04-17T13:00:31Z")

</div>

I just went through this process as well → [Conditional Colouring of Checkbox Group background - #7 by gmerritt123](https://discourse.bokeh.org/t/conditional-colouring-of-checkbox-group-background/10353/7) There are some working examples in here. For the most part I think the new set up (using stylesheet models) is a lot nicer but yeah will take a bit of work to bring my existing stuff in line with it.

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [April 18, 2023, 8:50am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/16 "2023-04-18T08:50:22Z")

</div>

@gmerritt123 , I tried to follow the examples you mentioned but I cannot achieve what I like to. I would like to change the colour of the “checkboxgroup” text (label). Have you got any idea how I could achieve it.  
Thanks

---

<div class="post-metadata">

**Author:** ![gmerritt123](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/gmerritt123/32/4101_2.png) [@gmerritt123](https://discourse.bokeh.org/u/gmerritt123)\
**Post date:** [April 18, 2023, 11:47am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/17 "2023-04-18T11:47:08Z")

</div>

```auto
from bokeh.models import CheckboxGroup, Slider
from bokeh.models import InlineStyleSheet
from bokeh.plotting import save

cbgss = InlineStyleSheet(css="div.bk-input-group{color: red; }")
cbg = CheckboxGroup(labels = ['Here','It is','Red'],active=[0,1,2]
                    ,stylesheets=[cbgss]
                    )
save(cbg,r'C:\Projects\testcb.html')

```

---

<div class="post-metadata">

**Author:** ![Gilles](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/g/ce7236/32.png) [@Gilles](https://discourse.bokeh.org/u/Gilles)\
**Post date:** [April 19, 2023, 12:39am UTC](https://discourse.bokeh.org/t/how-to-change-font-name-and-font-size-of-labels-of-the-checkboxgroup-widget/7886/18 "2023-04-19T00:39:06Z")

</div>

Thanks @gmerritt123 .  
Got it working now.