How to use custom font from from local ttf-File with bootstrap-css file?

Dash Python
1

Hi,

I’m failing on using a font from a local .ttf file. I already tried the solution in the similar post: How to set custom font-family in Dash from local file?. However, it did not really answer my question, also my scenario is slightly different.

Also I should note that I do not have that much experience with CSS.

the font file is located the directory assets/fonts/myfont.ttf.

In assets/, I also have a stylesheets.css, which is just a local copy of the Flatly-Bootstrap Theme: https://bootswatch.com/4/flatly/bootstrap.css

At the very top of the file, I added the following:

@font-face {
  font-family: "MyFont";
  src: url("assets/fonts/myfont.ttf") format("truetype");
}

/* rest of the .css file */
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap");
:root {
  --blue: #2c3e50;
  --indigo: #6610f2;
  --purple: #6f42c1;
/* ... and so on */

however, in the Layout, it appears like Times New Roman:
image

app.layout = html.Div([
    html.P("Some Content", style={"font-family": "MyFont"})
])

I also tried to switch the @font-face-part to:

@font-face {
  font-family: "MyFont";
  src: local("assets/fonts/myfont.ttf") format("truetype");
}

because this is how I understood the documentation of @font-face. However, it did not affect anything.

Any Ideas what I am doing wrong?

2

Hi @enq ,

Try to remove assets folder in src, because the root of static file is folder assets.
if you explicitly include assets folder, Dash will be referencing path assets/assets/fonts/myfont.ttf, which is not exist.

So, my suggestion change from your code,

@font-face {
  font-family: "MyFont";
  src: local("fonts/myfont.ttf") format("truetype");
}

Hope this help.

1 Like