[BUG]: Text extents are not recomputed after web font loading

[now-daniel-beiter]

Description

When using custom web fonts loaded via @font-face or external stylesheets, Plotly computes text extents before the configured font is available and therefore uses fallback font metrics.

Once the web font has loaded, the SVG text elements correctly update to the configured font-family, but the previously computed text extents are not recomputed.

As a result, text may become clipped or incorrectly positioned when the web font has significantly different metrics from the fallback font, which is particularly noticeable with monospace fonts.

The issue only occurs on the first page load. A subsequent refresh uses the already-loaded web font, and the text extents are calculated correctly.

Expected behavior: Text extents should either be computed after the configured font has loaded or recomputed once the font becomes available.

Screenshots/Video

Output of example below:

Steps to reproduce

Minimal example using a slightly modified version of the bar chart example

Plotly version: v6.9.0

import plotly.express as px

long_df = px.data.medals_long()

fig = px.bar(long_df, x="nation", y="count", color="medal", title="Long-Form Input")

fig.update_layout(
    font=dict(
        family="JetBrains Mono",
    ),
    legend=dict(
        borderwidth=1
    )
)
fig.add_annotation(
    x=1.05,
    y=0.0,
    xref="paper",
    yref="paper",
    xanchor="left",
    yanchor="bottom",
    text="Source: Coyote | \u00a9 ACME",
    textangle=-90,
    showarrow=False,
    bgcolor="rgba(0,0,0,0.2)",
)

fig.write_html("plotly_bar_jetbrains_mono.html", include_plotlyjs="cdn")

# Inject the following stylesheet into the head section of the html
# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.20/index.css">

Notes

Tested with:
Firefox 152.0.5
Edge 150.0.4078.65
Chrome 150.0.7871.115