Axis labels and tick labels in 3D plots do not use fonts loaded from remote server

[wasimsandhu]

I have an HTML export of a 3D figure created using the Python API. For website embedding, I load a custom font from a server. For the example here, I'll just use a Google Font with a distinct style:

<link
  href="http://fonts.googleapis.com/css?family=Audiowide"
  rel="stylesheet"
  type="text/css"
/>

I include a template in the plot layout so that this font is used for axis labels, tick labels, and et cetera. For 2D plots, this works as expected. For 3D plots, the axis and tick labels do not use the font at all.

I can't share the HTML export, but I recreated a minimal example from scratch to demonstrate this using Plotly.js:

plotly-3d-graph-font-issue.html.zip

[wasimsandhu]

Another note that may be helpful to add here is that if I install the Audiowide font on my local machine and remove the <link> tag, all fonts are properly applied. The problem seems to be specifically with loading the font from a remote server.

I tried to call Plotly.newPlot after the fonts have loaded via document.fonts.ready.then((fontFaceSet) => { ... }, but this doesn't make a difference.

[gvwilson]

Thanks for reporting this @wasimsandhu - it's definitely a bug, but it may be some time before we can get to it.

[wasimsandhu]

@gvwilson No problem, thanks for triaging.