Merge pull request #316 from matthew-hre/font-fix

Fix: monospace fonts not rendering properly with custom fonts disabled

Author: mitchellh

src/components/codeblock/CodeBlock.module.css

@@ -9,7 +9,14 @@
 
 .codeBlock code {
   padding: 16px;
-  font-family: inherit;
+  /* Fix for https://github.com/ghostty-org/website/issues/312
+  * In the case a user has custom fonts disabled, this ensures
+  * that the code block is still readable. 
+  *
+  * Additionally, `inherit` here didn't seem to be working? So we're
+  * setting the font-family explicitly. 
+  */
+  font-family: var(--jetbrains-mono), monospace;
 }
 
 .copyButton {
@@ -40,4 +47,3 @@
 .copyButtonSuccess {
   color: var(--atom-one-green);
 }
-

src/components/text/Text.module.css

@@ -77,7 +77,11 @@
     }
   }
   & > code {
-    font-family: var(--jetbrains-mono);
+    /* Fix for https://github.com/ghostty-org/website/issues/312
+  * In the case a user has custom fonts disabled, this ensures
+  * that the code block is still readable. 
+  */
+    font-family: var(--jetbrains-mono), monospace;
     border: 1px solid var(--gray-3);
     background: var(--gray-2);
     border-radius: 4px;

src/components/vt-sequence/VTSequence.module.css

@@ -7,7 +7,11 @@
   align-items: flex-start;
 
   & .unimplemented {
-    font-family: var(--jetbrains-mono);
+    /* Fix for https://github.com/ghostty-org/website/issues/312
+  * In the case a user has custom fonts disabled, this ensures
+  * that the code block is still readable. 
+  */
+    font-family: var(--jetbrains-mono), monospace;
     font-size: 14px;
     background: var(--atom-one-red);
     color: var(--gray-0);
@@ -26,7 +30,7 @@
     flex-grow: 1;
     width: 100%;
     display: flex;
-    font-family: var(--jetbrains-mono);
+    font-family: var(--jetbrains-mono), monospace;
     list-style: none;
 
     & .vtelem {