0

I have a customized css font that I would like to embed in bokeh plots so that the axes Fonts are styled appropriately. In live HTML, I can add this css independently from the bokeh HTML components. However, when I want to export as png (bokeh uses headless phantomjs and selenium to export), I need to embed this css before the export_png function does its job. I tried "extending" the Figure class and adding css, however, this shows up in the final HTML as a link and not as inline css. Is there anyway I can accomplish this ? All I need is the png to render with my customized font.

user3076411
  • 107
  • 1
  • 9

1 Answers1

1

Bokeh renders to an HTML Canvas, which is a primitive raster drawing area that does not use or pay attention to CSS. Bokeh exposes the canvas font property via properties on its own models, e.g. to set the font of the major tick labels: 

p.axis.major_label_text_font = "helvetica"
p.axis.major_label_text_font_size = "5pt"

The documentation lists all the general kinds of text properties, as well as all the properties specific to axes.

Presumably to load an external custom font, you would need to also follow the guidance in this SO question to load the font in the first place: How can I use custom fonts in an HTML5 Canvas element?

bigreddot
  • 33,642
  • 5
  • 69
  • 122
  • Thanks bigreddot. Normally if I set my font in the bokeh object to "my_special_font", and then get the bokeh components and embed them in HTML, all I need to do is add my font css to my final HTML page. The bokeh JS does seem to pick it up. In this case, my question is that if I want to export_png my figure (to a file, for example), I need to somehow tell the renderer what my font is. Since bokeh uses a headless browser to do the rendering. I assumed it should be able to understand my css before rendering. I just need to know how to include it before it does the screenshot and exports png. – user3076411 Mar 27 '18 at 16:03
  • Oh I see, that may actually require new development. I am not sure there are currently any hooks to customize the CSS that the headless browser uses. You *might* be able to add CSS to the [`Resources`](https://bokeh.pydata.org/en/latest/docs/reference/resources.html#bokeh.resources.Resources) object but if you can't make that work, a GitHub issue is the next step. – bigreddot Mar 27 '18 at 17:45