diff --git a/src/ext/conf/BrowserDetect.js b/src/ext/conf/BrowserDetect.js
index 702ed1c..d2d58e5 100644
--- a/src/ext/conf/BrowserDetect.js
+++ b/src/ext/conf/BrowserDetect.js
@@ -1,3 +1,5 @@
+import browser from "vuex-webextensions/dist/browser";
+
 if (process.env.CHANNEL !== 'stable') {
   console.info('Loaded BrowserDetect');
 }
@@ -9,7 +11,9 @@ const BrowserDetect = {
   edge: process.env.BROWSER === 'edge',
   processEnvBrowser: process.env.BROWSER,
   processEnvChannel: process.env.CHANNEL,
-  isEdgeUA: () => /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent)
+  isEdgeUA: () => /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent),
+  getBrowserObj: () => { return process.env.BROWSER === 'firefox' ? browser : chrome; },
+  getURL: (url) => { console.log('getting file:', url); console.log(process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url)); return process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url); },
 } 
 
 if (process.env.CHANNEL !== 'stable') {
diff --git a/src/ext/lib/uwui/FontLoader.js b/src/ext/lib/uwui/FontLoader.js
new file mode 100644
index 0000000..ccf87b3
--- /dev/null
+++ b/src/ext/lib/uwui/FontLoader.js
@@ -0,0 +1,129 @@
+import BrowserDetect from '../../conf/BrowserDetect';
+
+function url(file) {
+  return BrowserDetect.getURL(file);
+}
+
+export default class FontLoader {
+  static loadFonts() {
+    const fontsStyleElement = document.createElement('style');
+    fontsStyleElement.type = 'text/css';
+
+    fontsStyleElement.textContent = `
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-thin.woff2')} format('woff2'); /* Super Modern Browsers */
+           font-weight: 200;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-thin-italic.woff2')} format('woff2');
+           font-weight: 200;
+           font-style: italic;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-extralight.woff2')} format('woff2');
+           font-weight: 300;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-extralight-italic.woff2')} format('woff2');
+           font-weight: 300;
+           font-style: italic;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-light.woff2')} format('woff2');
+           font-weight: 400;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-light-italic.woff2')} format('woff2');
+           font-weight: 400;
+           font-style: italic;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-regular.woff2')} format('woff2');
+           font-weight: 500;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-italic.woff2')} format('woff2');
+           font-weight: 500;
+           font-style: italic;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-semibold.woff2')} format('woff2');
+           font-weight: 600;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-semibold-italic.woff2')} format('woff2');
+           font-weight: 600;
+           font-style: italic;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-bold.woff2')} format('woff2');
+           font-weight: 700;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass';
+      src: ${url('res/fonts/overpass-webfont/overpass-bold-italic.woff2')} format('woff2');
+           font-weight: 700;
+           font-style: italic;
+    }
+    
+    @font-face {
+      font-family: 'Overpass mono';
+      src: ${url('res/fonts/overpass-mono-webfont/overpass-mono-light.woff2')} format('woff2');
+           font-weight: 300;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass mono';
+      src: ${url('res/fonts/overpass-mono-webfont/overpass-mono-regular.woff2')} format('woff2');
+           font-weight: 400;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass mono';
+      src: ${url('res/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2')} format('woff2');
+           font-weight: 500;
+           font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Overpass mono';
+      src: ${url('res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2')} format('woff2');
+           font-weight: 600;
+           font-style: normal;
+    }
+    `;
+
+    document.head.appendChild(fontsStyleElement);
+    console.log("font loaded!")
+  }
+}