Custom font for menubar / headings ?

[Ishan95014]

Hello, it says here that "The font can then be applied to specific elements, e.g. only headlines,"
But it is not explained how. Could that explanation be added ?

Thanks in advance.

[squidfunk]

For customizing specific elements, some CSS knowledge is required. The main headline for example can be styled with:

.md-typeset h1 {
  font-family: "<font>";
}

Edited after last comment.

[Ishan95014]

In fact, even using web safe fonts doesn't work :

.md-typeset h1 {
    color: greenyellow;
    --md-text-font: "arial";
}

I'm really lost as to what I'm doing wrong here. Additional typefaces aren't marked as being an insider feature, are they ?

[squidfunk]

No, typefaces and CSS adjustments are all non-Insiders. I think I must correct my previous code example, and you should just use font-family: Arial. You could use --md-text-font, but you'd need to use more complicated CSS for that due to how CSS variables work (my mistake), so I guess it's easier to just define font-family directly.

[Ishan95014]

This works :

@font-face {
    font-family: "Staatliches";
    src:url(Staatliches-Regular.ttf) ;
}

.md-typeset h1 {
    color: greenyellow;
    font-family: "Staatliches";
}

But only on local using mkdocs serve :
I'm using the simple expressJS static server to actually deploy the website and in that case, neither the color (which worked from the start) nor the typeface (which I was just linking to wrong with quotation marks in the @font-face) work.

[squidfunk]

If it works on mkdocs serve, it's likely related to something else, i.e. how you serve and deploy the site. My guess is that the font file either can't be found, or your web server serves it with an incorrect mime type.

[Ishan95014]

It works perfectly, the server just needed time.

Solution :
Use font-family