fix(font): Replace Roboto Mono with Hack-ZeroSlash (#47767)

Co-authored-by: Bruce Blaser <bbsmooth@gmail.com>

client/src/components/Header/components/universal-nav.css

@@ -437,7 +437,7 @@ button.nav-link[aria-disabled='true'] {
   max-height: calc(var(--header-height) - 6px);
   padding: 4px 12px;
   margin-left: 2px;
-  font-family: 'Roboto Mono', monospace !important;
+  font-family: 'Hack-ZeroSlash', monospace !important;
   display: flex;
   align-items: center;
   justify-content: center;

client/src/components/layouts/default.tsx

@@ -8,9 +8,10 @@ import { createSelector } from 'reselect';
 import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff';
 import latoLightURL from '../../../static/fonts/lato/Lato-Light.woff';
 import latoRegularURL from '../../../static/fonts/lato/Lato-Regular.woff';
-import robotoBoldURL from '../../../static/fonts/roboto-mono/RobotoMono-Bold.woff';
-import robotoItalicURL from '../../../static/fonts/roboto-mono/RobotoMono-Italic.woff';
-import robotoRegularURL from '../../../static/fonts/roboto-mono/RobotoMono-Regular.woff';
+import hackZeroSlashBoldURL from '../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Bold.woff';
+import hackZeroSlashItalicURL from '../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Italic.woff';
+import hackZeroSlashRegularURL from '../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Regular.woff';
+
 import { isBrowser } from '../../../utils';
 import {
   fetchUser,
@@ -186,21 +187,21 @@ class DefaultLayout extends Component<DefaultLayoutProps> {
           <link
             as='font'
             crossOrigin='anonymous'
-            href={robotoRegularURL}
+            href={hackZeroSlashRegularURL}
             rel='preload'
             type='font/woff'
           />
           <link
             as='font'
             crossOrigin='anonymous'
-            href={robotoBoldURL}
+            href={hackZeroSlashBoldURL}
             rel='preload'
             type='font/woff'
           />
           <link
             as='font'
             crossOrigin='anonymous'
-            href={robotoItalicURL}
+            href={hackZeroSlashItalicURL}
             rel='preload'
             type='font/woff'
           />

client/src/components/layouts/fonts.css

@@ -38,31 +38,30 @@
   font-display: fallback;
 }
 
-/* roboto mono */
+/* hack zeroslash */
 
 @font-face {
-  font-family: 'Roboto Mono';
-  src: url('../../../static/fonts/roboto-mono/RobotoMono-Regular.woff')
-    format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: fallback;
+  font-family: 'Hack-ZeroSlash';
+  src: url('../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Regular.woff2')
+      format('woff2'),
+    url('../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Regular.woff')
+      format('woff');
 }
 
 @font-face {
-  font-family: 'Roboto Mono';
-  src: url('../../../static/fonts/roboto-mono/RobotoMono-Italic.woff')
-    format('woff');
-  font-weight: normal;
-  font-style: italic;
-  font-display: fallback;
-}
-
-@font-face {
-  font-family: 'Roboto Mono';
-  src: url('../../../static/fonts/roboto-mono/RobotoMono-Bold.woff')
-    format('woff');
+  font-family: 'Hack-ZeroSlash';
+  src: url('../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Bold.woff2')
+      format('woff2'),
+    url('../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Bold.woff')
+      format('woff');
   font-weight: bold;
-  font-style: normal;
-  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'Hack-ZeroSlash';
+  src: url('../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Italic.woff2')
+      format('woff2'),
+    url('../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Italic.woff')
+      format('woff');
+  font-style: italic;
 }

client/src/components/layouts/global.css

@@ -6,7 +6,7 @@ html {
 
 body {
   height: 100%;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'Hack-ZeroSlash', monospace;
   color: var(--secondary-color);
   background: var(--secondary-background);
 }
@@ -62,21 +62,21 @@ h1 {
   color: var(--secondary-color);
   font-weight: 700;
   font-size: 1.5rem;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'Hack-ZeroSlash', monospace;
   margin: 0.6rem 0;
 }
 h2 {
   color: var(--secondary-color);
   font-weight: 700;
   font-size: 1.25rem;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'Hack-ZeroSlash', monospace;
   margin: 0.6rem 0;
 }
 h3 {
   color: var(--secondary-color);
   font-weight: 700;
   font-size: 1.1rem;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'Hack-ZeroSlash', monospace;
   margin: 0 0 0.6rem;
 }
 
@@ -89,7 +89,7 @@ th {
   color: var(--secondary-color);
   font-weight: 400;
   font-size: 1rem;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'Hack-ZeroSlash', monospace;
   margin: 0 0 1.2rem;
 }
 
@@ -418,7 +418,7 @@ code {
   background-color: var(--quaternary-background);
   color: var(--tertiary-color);
   border-radius: 0;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'Hack-ZeroSlash', monospace;
   overflow-wrap: anywhere;
 }
 

client/src/templates/Challenges/classic/editor.css

@@ -57,7 +57,7 @@ textarea.inputarea {
 
 .description-container h1 {
   color: var(--secondary-color);
-  font-family: Roboto Mono, monospace;
+  font-family: Hack-ZeroSlash, monospace;
   font-size: 1.1rem;
   font-weight: 700;
   line-height: 1.1;

client/src/templates/Challenges/classic/editor.tsx

@@ -281,6 +281,7 @@ const Editor = (props: EditorProps): JSX.Element => {
 
   const options: editor.IStandaloneEditorConstructionOptions = {
     fontSize: 18,
+    fontFamily: 'Hack-ZeroSlash, monospace',
     scrollBeyondLastLine: true,
     selectionHighlight: false,
     overviewRulerBorder: false,