For a project using MkDocs Material, I wanted to enhance the code examples by changing the font. I switched one of the popular monospaced fonts until I realized none of the monospaced Google Fonts work in my browser.
Is there any special rules in CSS to add in order to get the expected behavior? Perhaps those Google fonts aren’t truly monospaced.
<html>
<head>
<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=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Mono:wght@400;500;700&family=Inconsolata:[email protected]&family=Noto+Sans+Mono:[email protected]&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
rel="stylesheet">
</head>
<style>
pre {
font-size: 1em;
line-height: 0.6em;
}
</style>
<h2>Roboto Mono</h2>
<body>
<h3>Default font</h3>
<pre><code>
0 1 2 3 4 5 6 7 8 9 10<br/>
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐<br/>
│-90│-33│ -5│ 1 │ 2 │ 4 │ 5 │ 7 │ 10│ 12│ 14│<br/>
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘<br/>
^<br/>
</code></pre>
<h3>Roboto Mono</h3>
<pre><code style="font-family: Roboto Mono">
0 1 2 3 4 5 6 7 8 9 10<br/>
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐<br/>
│-90│-33│ -5│ 1 │ 2 │ 4 │ 5 │ 7 │ 10│ 12│ 14│<br/>
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘<br/>
^<br/>
</code></pre>
<h2>Inconsolata</h2>
<pre><code style="font-family: Inconsolata">
0 1 2 3 4 5 6 7 8 9 10<br/>
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐<br/>
│-90│-33│ -5│ 1 │ 2 │ 4 │ 5 │ 7 │ 10│ 12│ 14│<br/>
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘<br/>
^<br/>
</code></pre>
<h2>Source Code Pro</h2>
<pre><code style="font-family: Source Code Pro">
0 1 2 3 4 5 6 7 8 9 10<br/>
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐<br/>
│-90│-33│ -5│ 1 │ 2 │ 4 │ 5 │ 7 │ 10│ 12│ 14│<br/>
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘<br/>
^<br/>
</code></pre>
<h2>Cousine</h2>
<pre><code style="font-family: Cousine">
0 1 2 3 4 5 6 7 8 9 10<br/>
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐<br/>
│-90│-33│ -5│ 1 │ 2 │ 4 │ 5 │ 7 │ 10│ 12│ 14│<br/>
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘<br/>
^<br/>
</code></pre>
<h2>Noto Sans Mono</h2>
<pre>
<code style="font-family: Noto Sans Mono">
0 1 2 3 4 5 6 7 8 9 10<br/>
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐<br/>
│-90│-33│ -5│ 1 │ 2 │ 4 │ 5 │ 7 │ 10│ 12│ 14│<br/>
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘<br/>
^<br/>
</code></pre>
<h2>Fira Mono</h2>
<pre>
<code style="font-family: Fira Mono">
0 1 2 3 4 5 6 7 8 9 10<br/>
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐<br/>
│-90│-33│ -5│ 1 │ 2 │ 4 │ 5 │ 7 │ 10│ 12│ 14│<br/>
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘<br/>
^<br/>
</code></pre>
</body>
</html>
As you can see on this screenshot (Edge), only the first example with the default font works. What’s wrong?
4