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


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:

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(",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:

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?