plotly / plotly/plotly.js

toImage function does not retain fonts that use quotes because of TOBESTRIPPED

Open
#5,096 4 comments 0 reactions 1 assignee View on GitHub

@alexshoe is already working on this.

Since Oct 28, 2025.

bug P2
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

When you use toImage on a plotly plot the resulting image will not use the font currently on display if that font uses a font that has to be quoted. This is because those fonts are converted from "Open Sans" to TOBESTRIPPEDOpen SansTOBESTRIPPED. I suppose those than have 'to be stripped', but that does not happen as it seems.

You can see this happening in this plot:

https://codepen.io/hwalinga/pen/GRZrBoq

If you watch closely you can indeed see the font is thicker in the below converted image. But you can also inspect the element of the rendered plot and converted plot if you want to see the bug in action:

The title on the rendered plot will be:

<text class="gtitle" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;" x="952" y="50" text-anchor="middle" dy="0em" data-unformatted="Title with different font" data-math="N">Title with different font</text>

The title on the converted plot (which you can inspect with "right click" -> "View Image" and then use your inspect tools.)

<text xmlns="http://www.w3.org/2000/svg" class="gtitle" style="font-family: TOBESTRIPPEDOpen SansTOBESTRIPPED, verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;" x="350" y="50" text-anchor="middle" dy="0em">Title with different font</text>

Not sure if this is maybe because this is a quote within a quote?

Also it seems you were already aware that this was an inappropriate solution to fixing quotation issues as by #1697. I hope with this bug report you will be more urged to implement something more robust soon.

EDIT:

There is a work around for these 'font-family' problems. Most application don't need to have font names with spaces to be quoted. In fact, this is in the CSS just a recommendation. 1 So you can just set the font-family without giving it quotes. It seems to have no bad side effect as I can see. Setting { font: { family: 'Open Sans, verdana, arial, sans-serif' }} in the layout set the same default fonts where it does not bug on "Open Sans".

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.