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

Abierto
#5,656 4 comentarios 0 reacciones 1 asignado Ver en GitHub

@emilykl ya está trabajando en esto.

Desde el 22/7/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

bug P2 size: 5
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:

Image
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

Lenguaje dominante
Python
Estrellas
18.8k
Forks
2.8k
Merge medio
16 h 26 min
PR fusionados (30 d)
21

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de plotly/plotly.py

Todos los issues de plotly/plotly.py

Issues similares

Más issues de Python

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.