I would like to use an external font in a Plotly graph made within Jupyter notebook.
From How do I set custom CSS for my IPython/IHaskell/Jupyter Notebook? I made a cell adding Poppins font whose embed i got from Google Fonts page.
%%html
<style>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</style>
Next using simple Plotly graph as an example I tried to use Poppins font in the next Jupyter code cell
# https://plotly.com/python/figure-labels/
import plotly.graph_objects as go
fig = go.Figure()
fig.add_trace(go.Scatter(
x=list(range(10)),
y=[n**2 for n in range(10)]
))
fig.update_layout(
title="My Plot Title",
font=dict(
family="Poppins, monospace", # only this part should matter
size=20
)
)
fig.show()
The graph is showing monospace, so that means that Poppins font failed to display.
From Chrome Dev tools it seems that %%HTML cell failed to load the font as there is no call to googleapis url.
I am running my own Littlest Jupyter Hub instance so I would consider also making a custom.css
