diff --git a/src/mainPage.tsx b/src/mainPage.tsx
index 5e9f1a7..377d6c5 100644
--- a/src/mainPage.tsx
+++ b/src/mainPage.tsx
@@ -6,7 +6,6 @@ import { FoodExcludeTypes } from "./types";
 const FONT_TYPES = [
   ["default", "Default (Comic Sans, Comic Neue or Default)"],
   ["system", "System Sans Font (as picked by Bootstrap Defaults)"],
-
   ["comicneue", "Comic Neue"],
   ["opendyslexic", "Open Dyslexic"]
 ];
@@ -18,6 +17,10 @@ export class SettingsBlock extends Component {
 
   fontSettingSelectRef = createRef<HTMLSelectElement>()
 
+  componentDidMount() {
+    document.body.setAttribute("data-font", "default");
+  }
+
   onFontChange() {
     if (!this.fontSettingSelectRef.current) return;
     let newFont = this.fontSettingSelectRef.current.value;
@@ -164,7 +167,7 @@ export class MainPage extends Component<unknown, { toggles: FoodExcludeTypes }>
         <FoodItem title="Hendo's Relish" />
         <FoodItem title="Worcestershire Sauce" contents={{ containsFish: true }} exclude={this.state.toggles} />
         <AdvancedFoodItem title="Spicy Mayo for Fries" extra={"Good with fries"} contents={{ containsEggs: true }} exclude={this.state.toggles} />
-        <AdvancedFoodItem title="Tomato Ketchup" extra={"Can't be too acidic"} exclude={this.state.toggles} />
+        <AdvancedFoodItem title="Tomato Ketchup" extra={"Can't be too acidic"} />
       </FoodItemsContainer>
 
       <br />
diff --git a/src/theme.scss b/src/theme.scss
index 1efe543..dc53993 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -2,18 +2,19 @@
 @import "../node_modules/@fontsource/opendyslexic/latin.css";
 
 
+$default-fonts: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$fonts-comic-sans-neue: "Comic Sans MS", "Comic Neue", $default-fonts;
+$fonts-comic-neue: "Comic Neue", $default-fonts;
+$fonts-opendyslexic: "OpenDyslexic", $default-fonts;
+$font-family-sans-serif: $fonts-comic-sans-neue;
+$font-sans-serif: $fonts-comic-sans-neue;
+
 // Configuration
 @import "../node_modules/bootstrap/scss/functions";
 @import "../node_modules/bootstrap/scss/variables";
 @import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/utilities";
 
-$default-fonts: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$fonts-comic-sans-neue: "Comic Sans MS", "Comic Neue", $default-fonts;
-$fonts-comic-neue: "Comic Neue", $default-fonts;
-$fonts-opendyslexic: "OpenDyslexic", $default-fonts;
-
-
 // Layout & components
 @import "../node_modules/bootstrap/scss/root";
 @import "../node_modules/bootstrap/scss/reboot";
@@ -58,7 +59,6 @@ body {
 }
 
 /* for custom theme settings, options in mainPage.tsx as of writing */
-$font-sans-serif: $fonts-comic-sans-neue;
 html, html [data-font="default"] {
     font-family: $fonts-comic-sans-neue;
 }