diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index d16f02f2b..7c1cd53cc 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -15,6 +15,7 @@ import { BodyTheme, ThemeContext } from "Components/Theme";
 import { ErrorBoundary } from "./ErrorBoundary";
 
 import "Styles/ResetCSS.scss";
+import "Styles/FontBundle.scss";
 import "Styles/App.scss";
 
 // https://github.com/facebook/react/issues/14603
diff --git a/ui/src/Styles/App.scss b/ui/src/Styles/App.scss
index adbf47654..08cf7dd3b 100644
--- a/ui/src/Styles/App.scss
+++ b/ui/src/Styles/App.scss
@@ -1,6 +1,3 @@
-// bundled font assets, so we don't need to talk to Google Fonts API
-@import "~typeface-open-sans/index.css";
-
 .cursor-pointer {
   cursor: pointer;
 }
diff --git a/ui/src/Styles/FontBundle.scss b/ui/src/Styles/FontBundle.scss
new file mode 100644
index 000000000..5841cf475
--- /dev/null
+++ b/ui/src/Styles/FontBundle.scss
@@ -0,0 +1,2 @@
+// bundled font assets, so we don't need to talk to Google Fonts API
+@import "~typeface-open-sans/index.css";
diff --git a/ui/src/Styles/Fonts.scss b/ui/src/Styles/Fonts.scss
index 9e39beb35..1c9a5539d 100644
--- a/ui/src/Styles/Fonts.scss
+++ b/ui/src/Styles/Fonts.scss
@@ -11,5 +11,3 @@ $font-weight-bold: 600;
 $font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont,
   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
   "Segoe UI Emoji", "Segoe UI Symbol" !default;
-
-@import "~typeface-open-sans/index.css";