diff --git a/app/styles/less/errors.less b/app/styles/less/errors.less
index 8c9cc4a48..d38a5b39f 100644
--- a/app/styles/less/errors.less
+++ b/app/styles/less/errors.less
@@ -8,7 +8,7 @@
   border: 1px solid black;
   border-radius: 4px 4px 4px 4px;
   color: infotext;
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--lume-g-font-family);
   font-size: 10pt;
   overflow: hidden;
   padding: 2px 5px;
diff --git a/app/styles/less/main.less b/app/styles/less/main.less
index cc7fc3264..211af7d76 100644
--- a/app/styles/less/main.less
+++ b/app/styles/less/main.less
@@ -12,7 +12,7 @@ html[role=api-designer] {
     height: 100%;
     margin: 0;
     padding: 0;
-    font-family: 'Open Sans', sans-serif;
+    font-family: var(--lume-g-font-family);
   }
 
   div.container {
diff --git a/app/styles/less/shelf.less b/app/styles/less/shelf.less
index 2bd6b1321..3c148b03f 100644
--- a/app/styles/less/shelf.less
+++ b/app/styles/less/shelf.less
@@ -101,7 +101,7 @@ div[role=shelf] ul[role=sections] > li[role=section] > ul[role=items] > li {
   color: gray;
   cursor: pointer;
   float: left;
-  font-family: "Lucida Console", Monaco, monospace;
+  font-family: var(--lume-g-font-family-code);
   font-size: 12px;
   font-weight: lighter;
   letter-spacing: 0.3px;