Unable to successfully use a third font

[Aazih]

Hey all,

I'm using material for mkdocs on my author site and I've used up the two out of the box fonts that can be configured in mkdocs.yml:

font:  
    text: Libre Franklin  
    code: Playfair

and update extra.css to override the font-family in the header and tabs.

/* Header */
.md-header {
  font-family: "Playfair";
}

.md-tabs {
  font-family: "PlayFair";
}

That worked as expected. But now I want to use another font and I'm having a tough time with the instructions on how to do so.

I added the following font face with the following code in extra.css (I retrieved the url from the google fonts site):

@font-face {
  font-family: "Lancelot";
  src: url("https://fonts.googleapis.com/css2?family=Lancelot&display=swap");
}

and then attempted to use it in the same file:

.bookfancy {
  text-align: center;
  font-size: 1.5rem;
  font-family: "Lancelot";
}

I do not see the font being used in the generated site and I do see the following errors from the developer console:

book/:1 Failed to decode downloaded font: https://fonts.googleapis.com/css2?family=Lancelot&display=swap

OTS parsing error: invalid sfntVersion: 791289964

Hoping there is something obvious I am missing. I do see other discussion on how to make deeper modifications to enable this here:

#7834

But I am hoping for something simpler

[kamilkrzyskow]

Hi @Aazih,
this is incorrect:

src: url("https://fonts.googleapis.com/css2?family=Lancelot&display=swap");

as the URL leads to a text file with CSS font rules, not to a font, so download the text file and include it in your CSS.
You could also use @import, but this increases the amount of requests, so I would keep it local in your extra.css

Also another possible nitpick I would have is you should not use font-family unless you're 100% sure that's what you want.
Instead, redefine the font variable as described in the docs, you can scope it to the .md-header etc. selectors, doesn't have to be :root:
Read the comment below for a fixed statement

--md-text-font: "<font>"; 

Ref:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@import
• https://squidfunk.github.io/mkdocs-material/setup/changing-the-fonts/#customization

Side note, in the past, at Nype, I did have to deal with some issues concerning "invisible text during load", and the issue there was a lack of defined swap mode for the custom font, but I guess the fonts from Google do come with it like the example above, but worth keeping a lookout for this issue 😉 :

• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

[kamilkrzyskow]

This url: https://fonts.googleapis.com/css2?family=Lancelot&display=swap contains this CSS:
These are the @font-face definitions, which allow to use the new font by referencing the name "Lancelot"

/* latin-ext */
@font-face {
  font-family: 'Lancelot';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lancelot/v27/J7acnppxBGtQEulG4KYxzp5yGw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lancelot';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lancelot/v27/J7acnppxBGtQEulG4KY_zp4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

add it to the extra.css and it should work, you don't have to download the files to include them in your site files.
However, doing so would increase privacy of your users.

I'm not sure whether or not the privacy plugin handles such cases automatically, but you could investigate.

Another option is to handle this process using a custom hook programmed in Python, The links above show /v27/ so handling it dynamically would allow to always have the latest version, but I don't think that's necessary.

You could also have a look at the fonts example:

• https://mkdocs-material.github.io/examples/fonts-custom/
• https://github.com/mkdocs-material/examples/tree/master/examples/fonts-custom

[Aazih]

Thanks so much @kamilkrzyskow taking the font-face from the Google css into extra.css worked as expected and now I'm using the font successfully. I've marked the question as answered!

I did test using --md-text-font and unfortunately the recommended format of:

.bookfancy {
  text-align: center;
  font-size: 2rem;
  --md-text-font: "Lancelot";
  --md-code-font: "Lancelot";
}

Did not work while using font-family does:

.bookfancy {
  text-align: center;
  font-size: 2rem;
  font-family: "Lancelot";
}

I don't know if it's worth discussing further here why the recommended code might not be working.

[kamilkrzyskow]

Thanks for letting me know. I had to fix a misconception that I had.

The variables from mkdocs-material are defined as follows in order:

/* Inline CSS from the templates mkdocs.yml */
/* In your case it would be Libre Franklin and Playfair */
:root {
  --md-text-font: "Roboto";
  --md-code-font: "Roboto Mono";
}
/* main.css file from the theme defines the True variable with all of the safety fallbacks on the body tag */
body {
  --md-text-font-family: var(--md-text-font,_),-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --md-code-font-family: var(--md-code-font,_),SFMono-Regular,Consolas,Menlo,monospace;
  font-family:var(--md-text-font-family);
}

In general the CSS rules are reevaluated for each DOM element, CSS is additive, so I thought that changing the --md-text-font variable would be enough, to recompute the styling. However, it seems that the --md-text-font-family keeps the initial calculation, same for font-family, and this makes complete sense from a programming standpoint, as the variable wasn't re-set to a new value. Therefore, my initial comment was incorrect, sorry about that 🫡

So you're correct, it's required to re-set the font-family property, but we need to remember about the safety fallbacks.
Here are 2 examples, use the first one if you plan to use the new variable value, or use the second to keep it short.

.bookfancy {
  --md-text-font: "Lancelot";
  font-family: var(--md-text-font), var(--md-text-font-family);
}

.bookfancy {
  font-family: "Lancelot", var(--md-text-font-family);
}

[Aazih]

Thanks so much, do you think this warrants an update to the use custom font documentation?

[kamilkrzyskow]

You could send in a PR if you want, either to the docs here or to the examples repository itself, with a fix for display: swap as well 🫡
But I don't think it's a priority ✌️