diff --git a/src/HTMLPanel.tsx b/src/HTMLPanel.tsx
index 920d00b..cc0246a 100755
--- a/src/HTMLPanel.tsx
+++ b/src/HTMLPanel.tsx
@@ -8,8 +8,6 @@ import {
 } from '@grafana/data';
 import { config, getTemplateSrv, getLocationSrv, locationService } from '@grafana/runtime';
 import { OptionsInterface, CalcsMutation, ErrorObj, HTMLNodeElement } from 'types';
-import 'fonts.scss';
-import 'fonts/OFL.txt';
 import { parseJSON } from 'utils/parseJSON';
 import _ from 'lodash';
 import { Errors } from 'components/Errors';
@@ -19,6 +17,7 @@ import { triggerPanelwillunmount } from 'utils/events/panelwillunmount';
 import { addHtml } from 'utils/addHtml';
 import { CustomScrollbar, ScrollContainer } from '@grafana/ui';
 import semver from 'semver';
+import './registerFonts';
 
 interface Props extends PanelProps<OptionsInterface> {}
 interface PanelState {
diff --git a/src/fonts.scss b/src/fonts.scss
deleted file mode 100644
index 365fab2..0000000
--- a/src/fonts.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@font-face {
-  font-family: 'Open Sans';
-  src: url('fonts/OpenSans-Light.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url('fonts/OpenSans-Regular.woff2') format('woff2');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url('fonts/OpenSans-SemiBold.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url('fonts/OpenSans-Bold.woff2') format('woff2');
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
diff --git a/src/registerFonts.ts b/src/registerFonts.ts
new file mode 100644
index 0000000..17dcfd7
--- /dev/null
+++ b/src/registerFonts.ts
@@ -0,0 +1,45 @@
+import { css } from '@emotion/css';
+
+function registerFonts() {
+  css([
+    {
+      '@font-face': {
+        fontFamily: 'Open Sans',
+        src: `url('${__webpack_public_path__}static/fonts/OpenSans-Light.woff2') format('woff2')`,
+        fontWeight: '300',
+        fontStyle: 'normal',
+        fontDisplay: 'swap',
+      },
+    },
+    {
+      '@font-face': {
+        fontFamily: 'Open Sans',
+        src: `url('${__webpack_public_path__}static/fonts/OpenSans-Regular.woff2') format('woff2')`,
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        fontDisplay: 'swap',
+      },
+    },
+    {
+      '@font-face': {
+        fontFamily: 'Open Sans',
+        src: `url('${__webpack_public_path__}static/fonts/OpenSans-SemiBold.woff2') format('woff2')`,
+        fontWeight: '600',
+        fontStyle: 'normal',
+        fontDisplay: 'swap',
+      },
+    },
+    {
+      '@font-face': {
+        fontFamily: 'Open Sans',
+        src: `url('${__webpack_public_path__}static/fonts/OpenSans-Bold.woff2') format('woff2')`,
+        fontWeight: 'bold',
+        fontStyle: 'normal',
+        fontDisplay: 'swap',
+      },
+    },
+  ]);
+}
+
+// Register fonts when module is loaded
+registerFonts();
diff --git a/src/fonts/OFL.txt b/src/static/fonts/OFL.txt
similarity index 100%
rename from src/fonts/OFL.txt
rename to src/static/fonts/OFL.txt
diff --git a/src/fonts/OpenSans-Bold.woff2 b/src/static/fonts/OpenSans-Bold.woff2
similarity index 100%
rename from src/fonts/OpenSans-Bold.woff2
rename to src/static/fonts/OpenSans-Bold.woff2
diff --git a/src/fonts/OpenSans-Light.woff2 b/src/static/fonts/OpenSans-Light.woff2
similarity index 100%
rename from src/fonts/OpenSans-Light.woff2
rename to src/static/fonts/OpenSans-Light.woff2
diff --git a/src/fonts/OpenSans-Regular.woff2 b/src/static/fonts/OpenSans-Regular.woff2
similarity index 100%
rename from src/fonts/OpenSans-Regular.woff2
rename to src/static/fonts/OpenSans-Regular.woff2
diff --git a/src/fonts/OpenSans-SemiBold.woff2 b/src/static/fonts/OpenSans-SemiBold.woff2
similarity index 100%
rename from src/fonts/OpenSans-SemiBold.woff2
rename to src/static/fonts/OpenSans-SemiBold.woff2