diff --git a/src/components/App/App.scss b/src/components/App/App.scss
index 1faf7d7..bbd4c97 100644
--- a/src/components/App/App.scss
+++ b/src/components/App/App.scss
@@ -1,14 +1,16 @@
 @import '../../variables.scss';
 
+.tlbx-h1,
+.tlbx-notes,
+.tlbx-sidebar-wrapper {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
 body {
   margin: 0;
   padding: 0;
 }
 
-.styleguide {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
-
 .tlbx-h2 { text-align: center; }
 
 .styleguide {
diff --git a/src/components/App/Theme.js b/src/components/App/Theme.js
index 82b7393..043fe3a 100644
--- a/src/components/App/Theme.js
+++ b/src/components/App/Theme.js
@@ -12,10 +12,9 @@ const base = {
 
 export const Theme = styled.div`
   background: ${config.bodyBackground || base.white};
-  color: ${config.bodyForeground || base.black};
 
-  h1, h2, h3, h4, h5, h6 {
-    color: ${config.headingForeground || base.black};
+  .tlbx-h1, .tlbx-h2, .tlbx-h3, .tlbx-h4, .tlbx-h5, .tlbx-h6, .tlbx-notes {
+    color: ${config.bodyForeground || base.black};
   }
 
   .tlbx-toolbar-btn { color: ${config.toolbarIconsForeground || base.white}; }