I'm currently in the process of designing a data visualisation dashboard using the Dash library in Python, and I was trying to make the font of the dashboard slightly more interesting than the generic Times New Roman-type font that seems to ship with HTML. My dashboard contains some Plotly figures that I was hoping to adjust to share the same font style.

I decided to go for the Lora typeface (), and importing this into Dash itself was easy enough; I just linked to an external stylesheet and Dash recognised the font fine for the HTML aspects of the dashboard. But with Plotly, it's seeming a little more difficult.

Plotly does not recognise the Lora font family natively, so this simple bit of code:

font = {"family" : "Lora"}

within the brackets of an update_layout call didn't work as it would with a native font like Calibri (for example), simply sticking to the generic Plotly font.

As such, I attempted to download the zip file for Lora containing all of the relevant TTF files from the Google link above, port it into my Google Colab notebook, and unzip it in Google Colab. I then tried the code above again with the zip file extracted in Google Colab, and the Plotly figure displayed with some variant of Times New Roman.

After that, I decided to try linking to the specific location of one of the TTF files as follows, thinking that linking to a specific file might make Plotly better interpret my desired font:

font = {"family" : "/static/Lora-Regular.ttf"}

This just made the figure output with the generic Plotly font.

Does anyone know what my issue might be? If it's relevant in terms of file storage, I'm working in a Google Colab notebook rather than locally on my own system.

I'm currently in the process of designing a data visualisation dashboard using the Dash library in Python, and I was trying to make the font of the dashboard slightly more interesting than the generic Times New Roman-type font that seems to ship with HTML. My dashboard contains some Plotly figures that I was hoping to adjust to share the same font style.

I decided to go for the Lora typeface (https://fonts.google/specimen/Lora), and importing this into Dash itself was easy enough; I just linked to an external stylesheet and Dash recognised the font fine for the HTML aspects of the dashboard. But with Plotly, it's seeming a little more difficult.

Plotly does not recognise the Lora font family natively, so this simple bit of code:

font = {"family" : "Lora"}

within the brackets of an update_layout call didn't work as it would with a native font like Calibri (for example), simply sticking to the generic Plotly font.

As such, I attempted to download the zip file for Lora containing all of the relevant TTF files from the Google link above, port it into my Google Colab notebook, and unzip it in Google Colab. I then tried the code above again with the zip file extracted in Google Colab, and the Plotly figure displayed with some variant of Times New Roman.

After that, I decided to try linking to the specific location of one of the TTF files as follows, thinking that linking to a specific file might make Plotly better interpret my desired font:

font = {"family" : "/static/Lora-Regular.ttf"}

This just made the figure output with the generic Plotly font.

Does anyone know what my issue might be? If it's relevant in terms of file storage, I'm working in a Google Colab notebook rather than locally on my own system.

• python
• plotly
• google-colaboratory
• plotly-dash

Share Improve this question Follow asked Mar 11 at 11:43 Matt NMatt N 1111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Not sure if this is an option for you, but you could download the font in the .tff format. Create a folder called assets and include the .tff file there. Also create a new file called styles.css, the structure is something like this:

main.py
assets/
│
├── your_font.tff
└── styles.css

And then the styles.css file looks something like:

/* Define the font face */
@font-face {
    font-family: 'WhateverNameYouWant';
    src: url('/assets/your_font.ttf') format('truetype');
}

/* Use the custom font in the app */
body {
    font-family: 'WhateverNameYouWant', sans-serif;
}

Dash will automatically import these files if you name them exactly like I wrote. Then to include it in your figures you just need to add:

fig.update_layout(font=dict(family='WhateverNameYouWant')