Popup is now set to use font overpass files that are included with the extension, as opposed to assuming people have it installed on their machines.

manifest-chrome.json

@@ -1,73 +0,0 @@
-{
-  "manifest_version": 2,
-  "name": "Ultrawidify",
-  "version": "2.0.3",
-  
-  "icons": {
-    "32":"res/icons/uw-32.png",
-    "64":"res/icons/uw-64.png"
-  },
-  
-  "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
-    
-  "content_scripts": [{
-    "matches": ["*://*/*"],
-    "js": [ 
-      "js/dep/jquery-3.1.1.js",
-      "js/dep/chrome/chrome-extension-async.js",
-      
-      "js/lib/BrowserDetect.js",
-      "js/lib/StorageManager.js",
-      "js/lib/Comms.js",
-      
-      "js/conf/Debug.js",
-      "js/conf/Settings.js",
-      "js/conf/SitesConf.js",
-      "js/conf/Status.js",
-      "js/conf/ExtensionConf.js",
-      
-      "js/modules/PageInfo.js",
-      "js/modules/ArDetect.js", 
-      "js/modules/Resizer.js",
-      
-      "js/conf/Keybinds.js",
-      
-      "js/uw.js" ], 
-    "all_frames": true
-  }],
-  
-
-  
-  "permissions": [
-    "tabs", "storage", "webNavigation", "activeTab", "<all_urls>"
-  ],
-  
-  "browser_action": {
-    "default_icon": "res/icons/uw-32.png",
-    "default_popup": "res/popup/popup.html",
-    "default_title": "Ultrawidify"
-  },
-  
-  "web_accessible_resources": [
-    "js/*",
-  
-    "res/img/ytplayer-icons/zoom.png",
-    "res/img/ytplayer-icons/unzoom.png",
-    "res/img/ytplayer-icons/fitw.png",
-    "res/img/ytplayer-icons/fith.png",
-    "res/img/ytplayer-icons/reset.png",
-    "res/img/ytplayer-icons/settings.png",
-    
-    "res/img/settings/about-bg.png",
-    
-    "res/css/uw_common.css",
-    "res/css/uw_yt.css",
-    "res/css/uw_netflix.css",
-    "res/css/uw_settings.css"
-  ],
-  
-  "options_ui" : {
-    "page": "res/settings/settings.html",
-    "open_in_tab": true
-  }
-}

manifest-chrome.json~HEAD

@@ -1,73 +0,0 @@
-{
-  "manifest_version": 2,
-  "name": "Ultrawidify",
-  "version": "2.0.2",
-  
-  "icons": {
-    "32":"res/icons/uw-32.png",
-    "64":"res/icons/uw-64.png"
-  },
-  
-  "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
-    
-  "content_scripts": [{
-    "matches": ["*://*/*"],
-    "js": [ 
-      "js/dep/jquery-3.1.1.js",
-      "js/dep/chrome/chrome-extension-async.js",
-      
-      "js/lib/BrowserDetect.js",
-      "js/lib/StorageManager.js",
-      "js/lib/Comms.js",
-      
-      "js/conf/Debug.js",
-      "js/conf/Settings.js",
-      "js/conf/SitesConf.js",
-      "js/conf/Status.js",
-      "js/conf/ExtensionConf.js",
-      
-      "js/lib/FullScreenDetect.js",
-      
-      "js/modules/PageInfo.js",
-      "js/modules/ArDetect.js", 
-      "js/modules/Resizer.js",
-      
-      "js/conf/Keybinds.js",
-      
-      "js/uw.js" ], 
-    "all_frames": true
-  }],
-  
-  "permissions": [
-    "tabs", "storage",  "activeTab", "<all_urls>", "*://*.youtube.com/*", "*://youtube.com/*", "*://imdb.com/*", "*://*.imdb.com/*"
-  ],
-  
-  "browser_action": {
-    "default_icon": "res/icons/uw-32.png",
-    "default_popup": "res/popup/popup.html",
-    "default_title": "Ultrawidify"
-  },
-  
-  "web_accessible_resources": [
-    "js/*",
-  
-    "res/img/ytplayer-icons/zoom.png",
-    "res/img/ytplayer-icons/unzoom.png",
-    "res/img/ytplayer-icons/fitw.png",
-    "res/img/ytplayer-icons/fith.png",
-    "res/img/ytplayer-icons/reset.png",
-    "res/img/ytplayer-icons/settings.png",
-    
-    "res/img/settings/about-bg.png",
-    
-    "res/css/uw_common.css",
-    "res/css/uw_yt.css",
-    "res/css/uw_netflix.css",
-    "res/css/uw_settings.css"
-  ],
-  
-  "options_ui" : {
-    "page": "res/settings/settings.html",
-    "open_in_tab": true
-  }
-}

manifest-ff.json

@@ -1,93 +0,0 @@
-{
-  "manifest_version": 2,
-  "name": "Ultrawidify",
-  "version": "2.1.1",
-  
-  "icons": {
-    "32":"res/icons/uw-32.png",
-    "64":"res/icons/uw-64.png"
-  },
-  
-  "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos. Now with more autodetection.",
-  
-  "content_scripts": [{
-    "matches": ["*://*/*"],
-    "js": [ 
-    "js/dep/jquery-3.1.1.js",
-    
-    "js/run/GlobalVars.js",
-    "js/lib/BrowserDetect.js",
-    "js/lib/StorageManager.js",
-    "js/lib/Comms.js",
-    
-    "js/conf/Debug.js",
-    "js/conf/Settings.js",
-    "js/conf/SitesConf.js",
-    "js/conf/Status.js",
-    "js/conf/ExtensionConf.js",
-    
-    "js/lib/PlayerDetect.js",
-    
-    "js/modules/PageInfo.js",
-    "js/modules/ArDetect.js", 
-    "js/modules/Resizer.js",
-    
-    "js/conf/Keybinds.js",
-    
-    "js/uw.js" ], 
-    "all_frames": true
-  }],
-  
-  "background": {
-    "scripts": [
-    "js/dep/jquery-3.1.1.js",
-    
-    "js/lib/BrowserDetect.js",
-    "js/lib/StorageManager.js",
-    "js/lib/Comms.js",
-    
-    "js/conf/Debug.js",
-    "js/conf/Settings.js",
-    "js/conf/SitesConf.js",
-    "js/conf/Status.js",
-    "js/conf/ExtensionConf.js",
-    
-    
-    "js/modules/PageInfo.js",
-    "js/modules/ArDetect.js", 
-    "js/modules/Resizer.js",
-    
-    "js/conf/Keybinds.js",
-    
-    "js/uw-bg.js"
-    ]
-  },
-  
-  "permissions": [
-    "tabs", "storage",  "activeTab", "<all_urls>", "webNavigation"
-  ],
-  
-  "browser_action": {
-    "default_icon": "res/icons/uw-32.png",
-    "default_popup": "res/popup/popup.html",
-    "default_title": "Ultrawidify"
-  },
-  
-  "web_accessible_resources": [
-  "js/*",
-  
-  "res/img/ytplayer-icons/zoom.png",
-  "res/img/ytplayer-icons/unzoom.png",
-  "res/img/ytplayer-icons/fitw.png",
-  "res/img/ytplayer-icons/fith.png",
-  "res/img/ytplayer-icons/reset.png",
-  "res/img/ytplayer-icons/settings.png",
-  
-  "res/img/settings/about-bg.png",
-  
-  "res/css/uw_common.css",
-  "res/css/uw_yt.css",
-  "res/css/uw_netflix.css",
-  "res/css/uw_settings.css"
-  ]
-}

manifest.json

@@ -77,6 +77,8 @@
   
   "web_accessible_resources": [
   "js/*",
+  "res/fonts/*",
+  "res/css/*",
   
   "res/img/ytplayer-icons/zoom.png",
   "res/img/ytplayer-icons/unzoom.png",
@@ -85,11 +87,6 @@
   "res/img/ytplayer-icons/reset.png",
   "res/img/ytplayer-icons/settings.png",
   
-  "res/img/settings/about-bg.png",
+  "res/img/settings/about-bg.png"
-  
-  "res/css/uw_common.css",
-  "res/css/uw_yt.css",
-  "res/css/uw_netflix.css",
-  "res/css/uw_settings.css"
   ]
 }

res/css/font/overpass-mono.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'overpass-mono';
+  src: url('overpass-mono-light.woff2') format('woff2'),
+       font-weight: 300;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass-mono';
+  src: url('overpass-mono-regular.woff2') format('woff2'),
+       font-weight: 400;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass-mono';
+  src: url('overpass-mono-semibold.woff2') format('woff2'),
+       font-weight: 500;
+       font-style: normal;
+}
+
+
+
+@font-face {
+  font-family: 'overpass-mono';
+  src: url('overpass-mono-bold.woff2') format('woff2'),
+       font-weight: 600;
+       font-style: normal;
+}

res/css/font/overpass.css

@@ -0,0 +1,125 @@
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-thin.woff2') format('woff2'), /* Super Modern Browsers */
+       font-weight: 200;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-thin-italic.woff2') format('woff2'),
+       font-weight: 200;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-extralight.woff2') format('woff2'),
+       font-weight: 300;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-extralight-italic.woff2') format('woff2'),
+       font-weight: 300;
+       font-style: italic;
+}
+
+
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-light.woff2') format('woff2'),
+       font-weight: 400;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-light-italic.woff2') format('woff2'),
+       font-weight: 400;
+       font-style: italic;
+}
+
+
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-regular.woff2') format('woff2'),
+       font-weight: 500;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-italic.woff2') format('woff2'),
+       font-weight: 500;
+       font-style: italic;
+}
+
+
+
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-semibold.woff2') format('woff2'),
+       font-weight: 600;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-semibold-italic.woff2') format('woff2'),
+       font-weight: 600;
+       font-style: italic;
+}
+
+
+
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-bold.woff2') format('woff2'),
+       font-weight: 700;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-bold-italic.woff2') format('woff2'),
+       font-weight: 700;
+       font-style: italic;
+}
+
+
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-extrabold.woff2') format('woff2'),
+       font-weight: 800;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-extrabold-italic.woff2') format('woff2'),
+       font-weight: 800;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-heavy.woff2') format('woff2'),
+       font-weight: 900;
+       font-style: normal;
+}
+
+@font-face {
+  font-family: 'overpass';
+  src: url('overpass-heavy-italic.woff2') format('woff2'),
+       font-weight: 900;
+       font-style: italic;
+}

res/popup/popup.html

@@ -2,6 +2,8 @@
   <head>
     <title></title>
     <meta charset="utf-8">
+    <link rel='stylesheet' type='text/css' href='../css/fonts/overpass.css'>
+    <link rel='stylesheet' type='text/css' href='../css/fonts/overpass-mono.css'>
     <style>
     html, body {
       width: 780px !important;
@@ -12,6 +14,7 @@
       color: #f8f8f8;
       background-color: #1f1f1f;
       font-family: "Overpass";
+      font-size: 1em;
     }
     
     .hidden {