ScatterGL inconsistently supports custom fonts

ScatterGL will not always plot text that comes from a custom font. When the dashboard is first loaded up, nothing appears on the plots at all. Once I refresh the page, the text will appear on the plot in the custom font. Ideally, the text would show up the first time the dashboard is loaded up. Below are a couple screenshots, the first one indicating what happens on the first load, the second one indicating what happens once I refresh the page. Note on the first one the points are being plotted as hover labels are present, the text just isn’t visible.


I have created a fully reproducible example of this issue.

The text I’m using is in a custom font package that is not installed on my computer. I don’t want to have to install the font on the computer, instead simply download the font package and use it. I’m using @font-face in a CSS in an ‘assets’ folder that exists in the same directory the script is in. The font package is also in this ‘assets’ folder.

The python script is as follows:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import random

app = dash.Dash(__name__, show_undo_redo=False)
app.config['suppress_callback_exceptions'] = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

app.layout = html.Div(


    Output('plot_div', 'children'),
    [Input('update', 'n_clicks')]
def plot_update(clicked):
    if clicked:
        x = [random.randint(1, 101) for i in range(100)]
        y = [random.randint(1, 101) for j in range(100)]
        text = [chr(random.randint(65, 126)) for k in range(100)]
        figure = {'data': [go.Scattergl(x=x, y=y, mode='text', text=text, textfont={'family': 'PlayfairDisplay'})],
                  'layout': {
                      'xaxis': {
                          'fixedrange': True,
                          'zeroline': False,
                      'yaxis': {
                          'fixedrange': True,
                          'zeroline': False,
                      'plot_bgcolor': 'rgba(180, 180, 180, 0.5)',
        return [

if __name__ == '__main__':
    app.run_server(debug=True, port=1000)

The CSS looks like this:

@font-face {
    font-family: 'PlayfairDisplay';
    src: url('PlayfairDisplay-Black.ttf');

I got the font package from the following website:
(Any font file should work as long as the ‘src’ in the CSS is the correct file name).

Any insight anyone has into this issue is greatly appreciated! Thanks!

Unfortunately, we’ve had various issues with scattergl font rendering, some of these issue are compiled here: