Changing fonts - possible improvements to the docs

[MaximilianKohler]

The current page https://squidfunk.github.io/mkdocs-material/setup/changing-the-fonts/#additional-fonts is pretty basic. As a noob, it was not clear to me what to put in src nor font-family when wanting to use Verdana:

@font-face {
  font-family: "<font>";
  src: "...";
}

So I had skipped that and just used:

:root {
  --md-text-font: "Verdana"; 
}

Which worked fine on desktop but didn't seem to work on mobile browsers.

Additional issues with font-weight:

In my mkdocs.yml I'm using:

  font:
    text: Noto Sans Adlam Unjoined
    code: Roboto Mono

I also use this CSS code that I found in another discussion:

/* Font size */
html {
  font-size: 19px;
}

I tried adding font-weight

/* Font size */
html {
  font-size: 19px;
  font-weight: 400;
}

But it only switches between light and bold.

Google's font pages https://fonts.google.com/noto/specimen/Noto+Sans+Adlam+Unjoined#styles show there are additional weights (400;500;600;700) and it tells me to add one or more of these:

font-family: 'Noto Sans Adlam Unjoined', sans-serif;

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Adlam+Unjoined:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Adlam+Unjoined:wght@400;500;600;700&display=swap');
</style>

Which is different from what's shown at https://squidfunk.github.io/mkdocs-material/setup/changing-the-fonts/#additional-fonts.

I did some googleing and found this example https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face. And from that I deduced that the correct code to add to extra.css is:

@font-face {
  font-family: 'Noto Sans Adlam Unjoined', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+Adlam+Unjoined:wght@400;500;600;700&display=swap');
}

So I did, but I still don't see a difference when switching between 400-500, or 600-700 via:

/* Font size */
html {
  font-size: 19px;
  font-weight: 500;
}