diff --git a/THIRDPARTY.md b/THIRDPARTY.md
index 438b355..ae7e3ff 100644
--- a/THIRDPARTY.md
+++ b/THIRDPARTY.md
@@ -23,6 +23,13 @@ Copyright: `© 2017-2020 by Paul James Miller. All rights reserved.`
 License: SIL Open Font License 1.1  
 Designers: Paul James Miller  
 
+## Atkinson Hyperlegible Mono
+Affected files: [`data/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf`](./data/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf) [`data/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf`](./data/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf)  
+URL: https://www.brailleinstitute.org/freefont/  
+Copyright: Copyright 2020-2024 The Atkinson Hyperlegible Mono Project Authors (https://github.com/googlefonts/atkinson-hyperlegible-next-mono)  
+License: SIL Open Font License 1.1  
+Designers: Elliott Scott, Megan Eiswerth, Braille Institute, Applied Design Works, Letters From Sweden
+
 ## ICONCINO
 
 Affected files: [`app/templates/common/icons.html`](./app/templates/common/icons.html)  
diff --git a/data/static/css/style.css b/data/static/css/style.css
index e6a0e1f..7efaa9e 100644
--- a/data/static/css/style.css
+++ b/data/static/css/style.css
@@ -26,10 +26,26 @@
   font-weight: bold;
   font-style: italic;
 }
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: italic;
+}
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
 .reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
   cursor: default;
-  font-size: 0.9em;
-  font-family: "Cadman";
+  font-size: 1rem;
+  font-family: "Cadman", sans-serif;
   text-decoration: none;
   border: 1px solid black;
   border-radius: 4px;
@@ -38,7 +54,7 @@
 }
 
 body {
-  font-family: "Cadman";
+  font-family: "Cadman", sans-serif;
   margin: 20px 100px;
   background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
   color: black;
@@ -188,6 +204,10 @@ a:visited {
   padding: 10px 0;
 }
 
+code {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
 pre code {
   display: block;
   background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
@@ -550,7 +570,7 @@ pre code { /* Literal.Number.Integer.Long */ }
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  font-family: "Cadman";
+  font-family: "Cadman", sans-serif;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
   background-color: #c1ceb1;
@@ -835,15 +855,20 @@ input[type=text], input[type=password], textarea, select {
   border-radius: 4px;
   padding: 7px 10px;
   width: 100%;
-  box-sizing: border-box;
   resize: vertical;
   color: black;
   background-color: rgb(217.8, 225.6, 208.2);
+  font-size: 100%;
+  font-family: inherit;
 }
 input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
   background-color: rgb(230.2, 235.4, 223.8);
 }
 
+textarea {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
 .infobox {
   border: 2px solid black;
   background-color: #81a3e6;
@@ -1094,7 +1119,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 
 .babycode-editor {
   height: 150px;
-  font-size: 1rem;
 }
 
 .babycode-editor-container {
@@ -1187,7 +1211,6 @@ ul.horizontal li, ol.horizontal li {
 .accordion {
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
-  box-sizing: border-box;
   border: 1px solid black;
   margin: 10px 5px;
   overflow: hidden;
diff --git a/data/static/css/theme-otomotone.css b/data/static/css/theme-otomotone.css
index add52e3..2f26eb0 100644
--- a/data/static/css/theme-otomotone.css
+++ b/data/static/css/theme-otomotone.css
@@ -26,10 +26,26 @@
   font-weight: bold;
   font-style: italic;
 }
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: italic;
+}
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
 .reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
   cursor: default;
-  font-size: 0.9em;
-  font-family: "Cadman";
+  font-size: 1rem;
+  font-family: "Cadman", sans-serif;
   text-decoration: none;
   border: 1px solid black;
   border-radius: 8px;
@@ -38,7 +54,7 @@
 }
 
 body {
-  font-family: "Cadman";
+  font-family: "Cadman", sans-serif;
   margin: 20px 100px;
   background-color: #220d16;
   color: #e6e6e6;
@@ -188,6 +204,10 @@ a:visited {
   padding: 10px 0;
 }
 
+code {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
 pre code {
   display: block;
   background-color: #302731;
@@ -550,7 +570,7 @@ pre code { /* Literal.Number.Integer.Long */ }
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  font-family: "Cadman";
+  font-family: "Cadman", sans-serif;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
   background-color: #9b649b;
@@ -835,15 +855,20 @@ input[type=text], input[type=password], textarea, select {
   border-radius: 8px;
   padding: 7px 10px;
   width: 100%;
-  box-sizing: border-box;
   resize: vertical;
   color: #e6e6e6;
   background-color: #371e37;
+  font-size: 100%;
+  font-family: inherit;
 }
 input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
   background-color: #514151;
 }
 
+textarea {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
 .infobox {
   border: 2px solid black;
   background-color: #775891;
@@ -1094,7 +1119,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 
 .babycode-editor {
   height: 150px;
-  font-size: 1rem;
 }
 
 .babycode-editor-container {
@@ -1187,7 +1211,6 @@ ul.horizontal li, ol.horizontal li {
 .accordion {
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
-  box-sizing: border-box;
   border: 1px solid black;
   margin: 10px 5px;
   overflow: hidden;
diff --git a/data/static/css/theme-peachy.css b/data/static/css/theme-peachy.css
index d47e90c..10ec1ea 100644
--- a/data/static/css/theme-peachy.css
+++ b/data/static/css/theme-peachy.css
@@ -26,10 +26,26 @@
   font-weight: bold;
   font-style: italic;
 }
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: italic;
+}
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
 .reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
   cursor: default;
-  font-size: 0.9em;
-  font-family: "Cadman";
+  font-size: 1rem;
+  font-family: "Cadman", sans-serif;
   text-decoration: none;
   border: 1px solid black;
   border-radius: 16px;
@@ -38,7 +54,7 @@
 }
 
 body {
-  font-family: "Cadman";
+  font-family: "Cadman", sans-serif;
   margin: 12px 50px;
   background-color: #c85d45;
   color: black;
@@ -188,6 +204,10 @@ a:visited {
   padding: 6px 0;
 }
 
+code {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
 pre code {
   display: block;
   background-color: rgb(41.7051685393, 28.2759550562, 24.6948314607);
@@ -550,7 +570,7 @@ pre code { /* Literal.Number.Integer.Long */ }
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  font-family: "Cadman";
+  font-family: "Cadman", sans-serif;
   border-top-right-radius: 16px;
   border-top-left-radius: 16px;
   background-color: #f27a5a;
@@ -835,15 +855,20 @@ input[type=text], input[type=password], textarea, select {
   border-radius: 16px;
   padding: 8px;
   width: 100%;
-  box-sizing: border-box;
   resize: vertical;
   color: black;
   background-color: rgb(247.2, 175.2, 156);
+  font-size: 100%;
+  font-family: inherit;
 }
 input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
   background-color: rgb(249.8, 201.8, 189);
 }
 
+textarea {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
 .infobox {
   border: 2px solid black;
   background-color: #81a3e6;
@@ -1094,7 +1119,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 
 .babycode-editor {
   height: 150px;
-  font-size: 1rem;
 }
 
 .babycode-editor-container {
@@ -1187,7 +1211,6 @@ ul.horizontal li, ol.horizontal li {
 .accordion {
   border-top-right-radius: 16px;
   border-top-left-radius: 16px;
-  box-sizing: border-box;
   border: 1px solid black;
   margin: 6px 3px;
   overflow: hidden;
diff --git a/data/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf b/data/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..fa3878a
Binary files /dev/null and b/data/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf differ
diff --git a/data/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf b/data/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf
new file mode 100644
index 0000000..ac9c7ee
Binary files /dev/null and b/data/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf differ
diff --git a/sass/_default.scss b/sass/_default.scss
index f6988e9..bf68fe4 100644
--- a/sass/_default.scss
+++ b/sass/_default.scss
@@ -95,14 +95,32 @@ $DEFAULT_BORDER_RADIUS: 4px !default;
   font-style: italic;
 }
 
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Atkinson Hyperlegible Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
+  font-weight: 125 950;
+  font-style: italic;
+}
+
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
 $button_border: $DEFAULT_BORDER !default;
 $button_padding: $SMALL_PADDING $BIG_PADDING !default;
 $button_border_radius: $DEFAULT_BORDER_RADIUS !default;
 $button_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
 %button-base {
   cursor: default;
-  font-size: 0.9em;
-  font-family: "Cadman";
+  font-size: 1rem;
+  font-family: "Cadman", sans-serif;
   text-decoration: none;
   border: $button_border;
   border-radius: $button_border_radius;
@@ -154,7 +172,7 @@ $navbar_margin: 0 !default;
 
 $body_margin: $BIG_PADDING $PAGE_SIDE_MARGIN !default;
 body {
-  font-family: "Cadman";
+  font-family: "Cadman", sans-serif;
   // font-size: 18px;
   margin: $body_margin;
   background-color: $MAIN_BG;
@@ -340,6 +358,10 @@ $signature_container_padding: $MEDIUM_PADDING $ZERO_PADDING !default;
   padding: $signature_container_padding;
 }
 
+code {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
 $code_background_color: $DARK_3 !default;
 $code_font_color: white !default;
 $code_border_radius: 8px !default;
@@ -444,7 +466,7 @@ $copy_code_border: 2px solid black !default;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  font-family: "Cadman";
+  font-family: "Cadman", sans-serif;
   border-top-right-radius: $code_border_radius;
   border-top-left-radius: $code_border_radius;
   background-color: $copy_code_header_background;
@@ -684,16 +706,21 @@ input[type="text"], input[type="password"], textarea, select {
   border-radius: $text_input_border_radius;
   padding: $text_input_padding;
   width: 100%;
-  box-sizing: border-box;
   resize: vertical;
   color: $text_input_font_color;
   background-color: $text_input_background;
+  font-size: 100%;
+  font-family: inherit;
   
   &:focus {
     background-color: $text_input_background_focus;
   }
 }
 
+textarea {
+  font-family: "Atkinson Hyperlegible Mono", monospace;
+}
+
 $infobox_info_color: #81a3e6 !default;
 $infobox_critical_color: #ed8181 !default;
 $infobox_warn_color: #fbfb8d !default;
@@ -1020,7 +1047,6 @@ $post_editing_context_margin: $BIG_PADDING $ZERO_PADDING !default;
 
 .babycode-editor {
   height: 150px;
-  font-size: 1rem;
 }
 
 .babycode-editor-container {
@@ -1113,7 +1139,6 @@ $accordion_margin: $MEDIUM_PADDING $SMALL_PADDING !default;
 .accordion {
   border-top-right-radius: $accordion_border_radius;
   border-top-left-radius: $accordion_border_radius;
-  box-sizing: border-box;
   border: $accordion_border;
   margin: $accordion_margin;
   overflow: hidden; // for border-radius clipping