Font "roboto" support

Community Support
1

Hello,

is there posibility to use “roboto” font? Or where I can find list of supportted Fonts?

Thank you

Jan Vaško

2

@VASKOTechDesign You should be able to use any font that is loaded into the page, but Bokeh itself does not handle font loading. You’ll need to do that yourself in a page template, or similar.

3

Hello Bryan,

Can you help me more with this?

I thought I already do it by parameters like:

  1. Axes: major_label_text_font
  2. Label: label_text_font
    …
    image

I put into this parameter “roboto”, but result was a differnet one. When there is “helvetica” it works, must probably because this is default one.

Bokeh: 3.3.4
Python: 3.11.2
Browser: Edge - Version 122.0.2365.92

Thank you

Jan

4

One can use any font with text_font and similar properties. However, one has to make sure that the font is available on the page. Bokeh prefers Helvetica and falls backs to Arial and then generic sans-serif font if not available. This also happens when the font chosen by the user is not available.

To include an external font, one way may be to link to google fonts like this:

from bokeh.models import GlobalInlineStyleSheet
stylesheet = GlobalInlineStyleSheet(css="""
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')
""")
plot.stylesheets.append(stylesheet)

Finally there’s an important caveat. Bokeh renders to HTML5 canvas, which means that we can’t take advantage of CSS’ ability to re-renderer when new fonts are loaded. Thus if fonts are not loaded before bokehjs, then these new fonts will be picked up by bokehjs on the next rendering iteration, which may require user interaction.

5

Hello mateusz,

I tested your 3 line code implement to my Chart Generator and it works well.

Thank you

Jan