diff --git a/src/elements/common/_variables.scss b/src/elements/common/_variables.scss
index e9c843e5ad..170ee36c5c 100644
--- a/src/elements/common/_variables.scss
+++ b/src/elements/common/_variables.scss
@@ -2,6 +2,7 @@
 @import '../../styles/inputs';
 
 $font: lato, 'Helvetica Neue', helvetica, arial, sans-serif;
+$fontComicSans: 'Comic Sans MS', cursive;
 $minimumWidth: 300px;
 $sidebarHeaderHeight: 60px;
 $sidebarSubHeaderHeight: 56px;
@@ -28,6 +29,10 @@ $sidebarTabResponsiveSize: 48px;
     /* stylelint-enable declaration-no-important */
     font-family: $font;
 
+    :where(body.is-comic-sans) & {
+        font-family: $fontComicSans;
+    }
+
     * {
         @include rendering;
 
@@ -54,4 +59,8 @@ $sidebarTabResponsiveSize: 48px;
     // Firefox sets opacity for placeholder to less than 100%
     // See https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#opaque_text
     opacity: 1;
+
+    :where(body.is-comic-sans) & {
+        font-family: $fontComicSans;
+    }
 }
diff --git a/src/styles/mixins/_typography.scss b/src/styles/mixins/_typography.scss
index 1349ffdcaa..d4b96b2905 100644
--- a/src/styles/mixins/_typography.scss
+++ b/src/styles/mixins/_typography.scss
@@ -3,6 +3,11 @@
 
 @mixin font-family {
     font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    &:where(body.is-comic-sans),
+    :where(body.is-comic-sans) & {
+        font-family: 'Comic Sans MS', cursive;
+    }
 }
 
 @mixin font-aliasing {