diff --git a/build/style/main.css b/build/style/main.css
index 8b8440d..1853cf5 100644
--- a/build/style/main.css
+++ b/build/style/main.css
@@ -981,6 +981,13 @@ code.sourceCode > span > a:first-child::before {
   --font-family-header: var(--dejavu), var(--system-ui);
   --font-family-mono: var(--dejavu-mono), var(--system-mono), var(--fallback-mono);
 }
+body {
+  color: var(--font-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  background: transparent;
+}
 @font-face {
   font-family: "DejaVu Sans";
   src: url("_DejaVuSans.ttf");
diff --git a/source/style/config.less b/source/style/config.less
index 7498e49..f18295b 100644
--- a/source/style/config.less
+++ b/source/style/config.less
@@ -16,6 +16,7 @@
 // Partials ====================================================================
 // Extends `print-first-css`
 
+@import "partials/_root.less";
 @import "partials/code";
 @import "partials/headings";
 @import "partials/skylighting";
diff --git a/source/style/modules/variables/typography.less b/source/style/modules/variables/typography.less
index 4e2e650..0754011 100644
--- a/source/style/modules/variables/typography.less
+++ b/source/style/modules/variables/typography.less
@@ -2,42 +2,24 @@
 // There are some annoying "bugs" when trying to specify San Francisco
 // fonts, also take care when naming them: See issue #12
 //
-// #1: @font-face should live outside of :root, but for now,
-//     the less compiler does that for us ... see issue #12
-// 
+// #1: DejaVu and Verdana (small) font stack
+//
 //     Inherited from print-first-css:
+//
 //     - `--system-ui`, `--system-mono`, `--fallback-mono`
-//     - Add your custom font variable and @font-face
-//     - https://www.hacksoft.io/blog/using-multiple-font-files-the-right-way
 //
-// #2: DejaVu and Verdana (small) font stack
 //
 //     ⟳ Switch to Verdana as our base font! (works better with DejaVu)
-//       than system-ui but — Verdana is a wee bit too big for my liking,
-//       reduce size for Anki Cards (but not global): see issue #12
+//       Verdana is a wee bit too big for my liking, so try to
+//       reduce size for Anki Cards (but not globally): see issue #12
 //
 //     ⇾ Also change the variables in `../../partials/..`
 //     ⟳ Override print-first-css files
 
-// #1
-@font-face {
-  font-family: "DejaVu Sans";
-  src: url("_DejaVuSans.ttf");
-  font-style: normal;
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "DejaVu Sans Mono";
-  src: url("_DejaVuSansMono.ttf");
-  font-style: normal;
-  font-weight: 400;
-}
-
 --dejavu: "DejaVu Sans";
 --dejavu-mono: "DejaVu Sans Mono";
 
-// #2
+// #1
 --font-family: 'Verdana', var(--system-ui);
 --font-family-header: var(--dejavu), var(--system-ui);
 --font-family-mono: var(--dejavu-mono), var(--system-mono), var(--fallback-mono);
diff --git a/source/style/partials/_root.less b/source/style/partials/_root.less
new file mode 100644
index 0000000..366ae8c
--- /dev/null
+++ b/source/style/partials/_root.less
@@ -0,0 +1,33 @@
+// Notes ==================================================================
+// #1: Anki (app) sets default `body` styles and `:root` doesn't override this.
+//     Might have to override all the styles in print-first-css `:root`?
+//     @ https://github.com/badlydrawnrob/anki/issues/117
+//
+// #2: @font-face should live outside of `:root` I found out. See issue #12
+//
+//     - Add your custom `--font-variable` and `@font-face`
+//     - https://www.hacksoft.io/blog/using-multiple-font-files-the-right-way
+
+// #1 !#
+body {
+  color: var(--font-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  background: transparent;
+}
+
+// #2
+@font-face {
+  font-family: "DejaVu Sans";
+  src: url("_DejaVuSans.ttf");
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  src: url("_DejaVuSansMono.ttf");
+  font-style: normal;
+  font-weight: 400;
+}