diff --git a/demo/editor/index.html b/demo/editor/index.html
index 85dc0c3cb..bc9fd9c6f 100644
--- a/demo/editor/index.html
+++ b/demo/editor/index.html
@@ -13,7 +13,7 @@
   html, body {
     margin: 0;
     padding: 0;
-    font-family: 'Roboto', 'Noto', sans-serif;
+    font-family: var(--lume-g-font-family);
     font-size: 15px;
     color: #424242;
     height: 100%;
diff --git a/demo/element/index.html b/demo/element/index.html
index 63645ac20..74adaa1c3 100644
--- a/demo/element/index.html
+++ b/demo/element/index.html
@@ -12,7 +12,7 @@
   html, body {
     margin: 0;
     padding: 0;
-    font-family: 'Roboto', 'Noto', sans-serif;
+    font-family: var(--lume-g-font-family);
     font-size: 15px;
     color: #424242;
     height: 100%;
diff --git a/demo/index.html b/demo/index.html
index adeccc5a4..1a11dba1d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -10,7 +10,7 @@
     html, body {
       margin: 0;
       padding: 0;
-      font-family: 'Roboto', 'Noto', sans-serif;
+      font-family: var(--lume-g-font-family);
       font-size: 15px;
       color: #424242;
       height: 100%;
diff --git a/demo/standalone/index.html b/demo/standalone/index.html
index 14da1a11d..7a26f0108 100644
--- a/demo/standalone/index.html
+++ b/demo/standalone/index.html
@@ -12,7 +12,7 @@
   html, body {
     margin: 0;
     padding: 0;
-    font-family: 'Roboto', 'Noto', sans-serif;
+    font-family: var(--lume-g-font-family);
     font-size: 16px;
     color: #424242;
     height: 100%;
diff --git a/demo/themed/dark-theme.css b/demo/themed/dark-theme.css
index 127dc4b5b..b73316426 100644
--- a/demo/themed/dark-theme.css
+++ b/demo/themed/dark-theme.css
@@ -135,7 +135,7 @@ body {
 
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', 'Noto', sans-serif;
+  font-family: var(--lume-g-font-family);
   font-size: 15px;
   height: 100%;
 }