What I’m trying to do:
Apply a theme that harnesses a stylesheet from the internet to retrieve custom fonts.
This very closely follows this github issue: [BUG] Google Fonts not loading on Glyph on standalone HTML until interacting with Glyph · Issue #9448 · bokeh/bokeh · GitHub but combined with the standalone embed example here: bokeh/embed_themed.py at branch-3.0 · bokeh/bokeh · GitHub
Except I’m running into one additional hurdle.
Sandbox code below:
from jinja2 import Template
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import INLINE, CDN
from bokeh.plotting import figure, save
from bokeh.layouts import layout
from bokeh.models import ColumnDataSource, Scatter
from bokeh.models import Label, LabelSet
from bokeh.themes import Theme
f = figure()
d = {'NAME':['Banana','Orange','Apple'],'x':[0,1,2],'y':[5,2,3]}
lblsrc = ColumnDataSource(data=d)
lbls = LabelSet(x='x',y='y',text='NAME',source= lblsrc)
# lbls.text_font = 'Uncial Antiqua'
f.add_layout(lbls)
sc = Scatter(x='x',y='y')
scr = f.add_glyph(lblsrc,sc)
lo = layout([f])
theme = Theme(json={
'attrs': {
'LabelSet': {
'text_font': 'Unicial Antiqua',
},
}
})
script, div = components(lo,theme=theme)
#NOTE the link to the google font in the template
template = Template('''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basemap</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Uncial+Antiqua:400" />
{{ resources }}
{{ script }}
</head>
<body>
{{ div }}
</body>
</html>
''')
resources = CDN.render()
filename = r'chk.html'
html = template.render(resources=resources,
script=script,
div=div)
with open(filename, mode="w", encoding="utf-8") as f:
f.write(html)
What’s happening:
-Font is being rendered in times new roman, inspection of javascript console says:
So it’s not finding the font.
Now what’s kinda funny here is if I inspect the html shown in github example linked above and find the specifier for text_font, it looks like this:
Now if I go looking in my html for the same thing, it actually points to an object instead of a string:
If I replace that object directly in the html with “Uncial Antiqua”:
I am able to reproduce the github issue:
My questions…
-
What is the {“field”:“Uncial Antiqua”} business all about? Do I need to write a subroutine here to search and replace {“field”:“Uncial Antiqua”} with “Uncial Antiqua” in the html string or is there a better way? There’s obviously another layer to this that I’m missing in my understanding.
-
I’ve read the docs on the json_item or embed_item API etc as mentioned by @Bryan in the github thread and would really appreciate a flesh-out of how it might be used here as an alternative?
As always any help/advice much appreciated.