How to set custom font-family in Dash from local file?

Hey guys,

I’m trying to use a font-style called “Segoe UI” from a .ttf file that is on the path assets/fonts/ as image below:

image

And I’m trying to load it on the style.css as the image below:
image

I’m trying to import it and set as the default font-family but it’s not loading in the application:

Does someone have experience with it?

I would really appreciate it if someone could give me some help to make it work.

Thank you in advance

1 Like

try clicking on the 500 network request and looking at the response. with debug=True, i’d expect to see a helpful error message in the response.

Hey Chris, thank you for your return…

When I click on the 500 it shows the message “Internal Server Error” as shown in the image below… When I tried the google fonts through the external_stylesheets it worked well.


I was doing some more tests and I realized that it started to work… I don’t know exactly why it happened

I have set style.css to:
image

And as the font isn’t serif, I’m assuming that it worked:
image

Anyway, I’m very thankful for your support

1 Like

Hi @kabure,

I have a similar problem. However I am not able to get it to work.

it seems to me like you only changed the link in “url” (Line 16, removed the “assets/” in front of the link) is this correct? Have you changed the file structure or is the folder “fonts” still in the assets folder?
And you have add “html” and “body” in Line 20, right?

Thx in advance!
Cheers

Hey @enq, what I did was:

@font-face {
font-family: “Segoe”;
src: url(“fonts/Segoe-UI.ttf”) format(“truetype”);
}

*, html, body {
font-family: “Segoe”, sans-serif;
}

and in my assets/fonts, I have
image

It has worked here.

2 Likes