const family = `JetBrainsMono`;
document.fonts.add(
new FontFace(
family,
`url(https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.20/files/jetbrains-mono-latin-400-normal.woff2)`,
),
);
const label = "I am Lrrr, of the planet Omicron Persei 8.";
Plotly.newPlot(
gd,
[
{
type: "treemap",
ids: ["root", "A", "B", "a1", "a2", "b1"],
labels: ["root", "A", "B", label, label, label],
parents: ["", "root", "root", "A", "A", "B"],
values: [0, 0, 0, 30, 20, 25],
// Start zoomed into B. Only the leaves of A use the web font.
level: "B",
textfont: {
family: ["Arial", "Arial", "Arial", family, family, "Arial"],
},
},
],
{ width: 700, height: 500 },
);
Description
#8094 redraws a plot when a web font loads during its draw. Text that is first drawn outside
_doPlotstill keeps its fallback font sizes. One example is a treemap that zooms throughPlotly.animatewithredraw: false.Drawing.bBoxcaches the fallback sizes, so the text stays wrong after the user zooms away and back. Hover labels also measure with the fallback font, but they correct themselves on the next hover because they are not cached.Screenshots/Video
Steps to reproduce
Adraw for the first time, and the font starts to load.Notes
bBoxcache whiledocument.fonts.statusisloadingcorrects the second view. It also turns off the cache for all text on the page during font loads, which makes first draws 20-30% slower. Clearing the cache entries for a font when that font loads can be a cheaper option.