layout→font→family: 'inherit' does not work as expected

[anders-kiaer]

Enabling a custom global font-family in a plotly.js plot is today possible using layout → font → family, which has default value "Open Sans", verdana, arial, sans-serif. See this pen for an example of including custom font.

This works well in cases where you know the font-family to use up front. In some cases plotly.js is used for making a plot, and the output is placed in a framework/context where the user controls the font in use.

Getting plotly.js output to inherit the font-family currently in use could maybe potentially be as simple as layout: {font: {family: 'inherit'}}, however this does not currently work as there seems to be a hard-coded value of "Open Sans", verdana, arial, sans-serif still given by plotly.js as style attribute higher in the DOM tree (which is then inherited by the plotly.js-created elements actually having font-family: inherit).

This is a stack overflow post apparently facing the same issue.

There exist workarounds like window.getComputedStyle(my_div_element,null).getPropertyValue("font-family"); and then get plotly.js to use the dynamically computed font-family, but it would be easier if plotly.js could inherit directly.

[alexcjohnson]

Interesting - yes, we set the top-level default font here:

plotly.js/src/css/_base.scss

Line 3 in 4225f9e

font-family: 'Open Sans', verdana, arial, sans-serif;

And it's possible that we could simply remove that, as long as we have set the font consistently across all internal elements.

I'm hesitant to do that though, as 'inherit' breaks portability of the plot. Even the "Download plot as a png" button could break, as this renders the plot in a <canvas> element that's not attached to the DOM.

The other concern is layout: because this is SVG (rather than HTML which has a layout engine) we need to render text, measure it, then manually size boxes, margins, etc to fit the text. So if the user were to render the plot and then change the font upstream, everything would be sized wrong. There's also the case where the user initially renders the plot into a div that's not attached to the DOM, and only attaches it later when the user requests that content - in that case there is no inheritance chain.

So while many cases could be accommodated one way or another, this poses enough problems that I think we had better leave it as is.

[pietersv]

@alexcjohnson Is there a way to specify the global font family that is hard coded? Possibly a "monkey patch", something like:

`Plotly.prototype.css._base["font-family"] = "Helvetica;Arial;sans-serif"

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson