diff --git a/src/index.jsx b/src/index.jsx
index 49d95c56c6..16f6109314 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -92,9 +92,13 @@ function onGlobalizeInit() {
     if (browser.tv && !browser.android) {
         console.debug('using system fonts with explicit sizes');
         import('./styles/fonts.sized.scss');
+    } else if (__USE_SYSTEM_FONTS__) { // eslint-disable-line no-undef
+        console.debug('using system fonts');
+        import('./styles/fonts.scss');
     } else {
         console.debug('using default fonts');
         import('./styles/fonts.scss');
+        import('./styles/fonts.noto.scss');
     }
 
     import('./styles/librarybrowser.scss');
diff --git a/src/styles/fonts.noto.scss b/src/styles/fonts.noto.scss
new file mode 100644
index 0000000000..53c1a9eb7c
--- /dev/null
+++ b/src/styles/fonts.noto.scss
@@ -0,0 +1,25 @@
+@import "../styles/noto-sans/index.scss";
+
+html {
+    font-family: "Noto Sans", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
+
+html[lang|="ja"] {
+    font-family: "Noto Sans", "Noto Sans JP", "Noto Sans HK", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
+
+html[lang|="ko"] {
+    font-family: "Noto Sans", "Noto Sans KR", "Noto Sans HK", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
+
+html[lang|="zh-CN"] {
+    font-family: "Noto Sans", "Noto Sans SC", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", sans-serif;
+}
+
+html[lang|="zh-TW"] {
+    font-family: "Noto Sans", "Noto Sans TC", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", sans-serif;
+}
+
+html[lang|="zh-HK"] {
+    font-family: "Noto Sans", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 681f1abd2c..88bf8578ad 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,5 +1,3 @@
-@import "../styles/noto-sans/index.scss";
-
 @mixin font($weight: null, $size: null) {
     font-weight: $weight;
     font-size: $size;
@@ -7,32 +5,11 @@
 
 html {
     @include font($size: 93%);
-    font-family: "Noto Sans", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
     text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }
 
-html[lang|="ja"] {
-    font-family: "Noto Sans", "Noto Sans JP", "Noto Sans HK", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
-}
-
-html[lang|="ko"] {
-    font-family: "Noto Sans", "Noto Sans KR", "Noto Sans HK", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif;
-}
-
-html[lang|="zh-CN"] {
-    font-family: "Noto Sans", "Noto Sans SC", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", sans-serif;
-}
-
-html[lang|="zh-TW"] {
-    font-family: "Noto Sans", "Noto Sans TC", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", sans-serif;
-}
-
-html[lang|="zh-HK"] {
-    font-family: "Noto Sans", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
-}
-
 h1 {
     @include font(400, 1.8em);
 }
diff --git a/webpack.common.js b/webpack.common.js
index 8022569b88..4f0d264d61 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -47,6 +47,7 @@ const config = {
     },
     plugins: [
         new DefinePlugin({
+            __USE_SYSTEM_FONTS__: JSON.stringify(!!process.env.USE_SYSTEM_FONTS),
             __WEBPACK_SERVE__: JSON.stringify(!!process.env.WEBPACK_SERVE)
         }),
         new CleanWebpackPlugin(),