Monospaced Google Fonts lack lots of glyphs

[yves-chevallier]

I spent some time trying to figure out why changing the monospace font in mkdocs.yml wasn't working as expected. According to the documentation in the section on Monospaced font, MkDocs Material should allow you to replace the default code font with another monospaced one from Google Fonts. However, I ran into issues, particularly with box drawing characters:

After some digging, and with a bit of help, I discovered that Google Fonts lack box drawing characters (U+2500-257F). Unfortunately, attempting to work around this by modifying the font definition didn’t solve the problem:

@font-face {
    font-family: 'Noto Sans Mono';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosansmono/v30/BngcUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZ2dPCj7dc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+2500-2600; /* <-------- HACKED HERE */
    /*unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;*/
}

I downloaded both the .ttf and .woff2 versions of the font and noticed a significant size difference, and the woff2 indeed misses many characters:

• Noto Sans Mono TTF (397k)
• Noto Sans Mono WOFF2 (116k)

Given this, I was hoping to configure a local font by specifying its path in theme.font.code. However, based on the schema, it seems this isn't currently supported.

This makes me question the utility of this setting. Code fonts are typically monospaced, but since Google doesn’t provide a complete font, this setting seems somewhat limited—unless we could configure a local font like this:

theme:
  name: material
  font: 
    code: docs/fonts/foobar.ttf

Of course, I could add my font using a dedicated CSS as explained in the documentation:

@font-face {
    font-family: "Noto Sans Mono";
    src: url("../fonts/NotoSansMono-Regular.woff2") format("woff2");
}

:root {
    --md-code-font: "Noto Sans Mono", monospace;
}

But I think it is worth mentioning in the documentation that Google Fonts for monospaced fonts can lead to spacing issues... This has been bothering me for some time...

What do you think?

[squidfunk]

Thanks for the feedback again. We can't possibly guarantee the availability of glyphs in Google Fonts, specifically in the light of the number of languages we support. We could add a note in our documentation to ensure that the font includes all glyphs, but that is not easy to check in the browser, since the browser will fall back to a series of fallback fonts. A better idea would be to check this during build time, where all rendered characters should basically be known, which might be an excellent idea for a plugin.