diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs
index f56a9037c1..a6d14f18c8 100644
--- a/build-scripts/bundle.cjs
+++ b/build-scripts/bundle.cjs
@@ -259,6 +259,7 @@ module.exports.config = {
       isHassioBuild: true,
       defineOverlay: {
         __SUPERVISOR__: true,
+        __STATIC_PATH__: `"${paths.hassio_publicPath}/static/"`,
       },
     };
   },
diff --git a/build-scripts/gulp/gather-static.js b/build-scripts/gulp/gather-static.js
index 9ae87144ba..a71c1e3f32 100644
--- a/build-scripts/gulp/gather-static.js
+++ b/build-scripts/gulp/gather-static.js
@@ -111,9 +111,10 @@ gulp.task("copy-translations-supervisor", async () => {
   copyTranslations(staticDir);
 });
 
-gulp.task("copy-locale-data-supervisor", async () => {
+gulp.task("copy-static-supervisor", async () => {
   const staticDir = paths.hassio_output_static;
   copyLocaleData(staticDir);
+  copyFonts(staticDir);
 });
 
 gulp.task("copy-static-app", async () => {
diff --git a/build-scripts/gulp/hassio.js b/build-scripts/gulp/hassio.js
index f547c7555d..db97991e4b 100644
--- a/build-scripts/gulp/hassio.js
+++ b/build-scripts/gulp/hassio.js
@@ -21,7 +21,7 @@ gulp.task(
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
-    "copy-locale-data-supervisor",
+    "copy-static-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -37,7 +37,7 @@ gulp.task(
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
-    "copy-locale-data-supervisor",
+    "copy-static-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     "gen-pages-hassio-prod",
     ...// Don't compress running tests
diff --git a/hassio/src/supervisor-base-element.ts b/hassio/src/supervisor-base-element.ts
index e61b83779b..fbcfb57831 100644
--- a/hassio/src/supervisor-base-element.ts
+++ b/hassio/src/supervisor-base-element.ts
@@ -98,11 +98,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
   }
 
   private async _initializeLocalize() {
-    const { language, data } = await getTranslation(
-      null,
-      this._language,
-      "/api/hassio/app/static/translations"
-    );
+    const { language, data } = await getTranslation(null, this._language);
 
     this._updateSupervisor({
       localize: await computeLocalize<SupervisorKeys>(
diff --git a/src/resources/locale-data-polyfill.ts b/src/resources/locale-data-polyfill.ts
index f1f462887b..2b8b424af0 100644
--- a/src/resources/locale-data-polyfill.ts
+++ b/src/resources/locale-data-polyfill.ts
@@ -15,7 +15,7 @@ export const polyfillLocaleData = async (language: string) => {
       typeof Intl.NumberFormat.__addLocaleData === "function"
     ) {
       const result = await fetch(
-        `/static/locale-data/intl-numberformat/${language}.json`
+        `${__STATIC_PATH__}locale-data/intl-numberformat/${language}.json`
       );
       // @ts-ignore
       Intl.NumberFormat.__addLocaleData(await result.json());
@@ -26,7 +26,7 @@ export const polyfillLocaleData = async (language: string) => {
       typeof Intl.RelativeTimeFormat.__addLocaleData === "function"
     ) {
       const result = await fetch(
-        `/static/locale-data/intl-relativetimeformat/${language}.json`
+        `${__STATIC_PATH__}locale-data/intl-relativetimeformat/${language}.json`
       );
       // @ts-ignore
       Intl.RelativeTimeFormat.__addLocaleData(await result.json());
@@ -37,7 +37,7 @@ export const polyfillLocaleData = async (language: string) => {
       typeof Intl.DateTimeFormat.__addLocaleData === "function"
     ) {
       const result = await fetch(
-        `/static/locale-data/intl-datetimeformat/${language}.json`
+        `${__STATIC_PATH__}locale-data/intl-datetimeformat/${language}.json`
       );
       // @ts-ignore
       Intl.DateTimeFormat.__addLocaleData(await result.json());
@@ -48,7 +48,7 @@ export const polyfillLocaleData = async (language: string) => {
       typeof Intl.DisplayNames.__addLocaleData === "function"
     ) {
       const result = await fetch(
-        `/static/locale-data/intl-displaynames/${language}.json`
+        `${__STATIC_PATH__}locale-data/intl-displaynames/${language}.json`
       );
       // @ts-ignore
       Intl.DisplayNames.__addLocaleData(await result.json());
diff --git a/src/resources/roboto.js b/src/resources/roboto.js
index 3ce550a859..397e4812c3 100644
--- a/src/resources/roboto.js
+++ b/src/resources/roboto.js
@@ -9,7 +9,7 @@ font-family: "Roboto";
 src:
   local("Roboto Thin"),
   local("Roboto-Thin"),
-  url(/static/fonts/roboto/Roboto-Thin.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-Thin.woff2) format("woff2");
 font-weight: 100;
 font-style: normal;
 }
@@ -18,7 +18,7 @@ font-family: "Roboto";
 src:
   local("Roboto Thin Italic"),
   local("Roboto-ThinItalic"),
-  url(/static/fonts/roboto/Roboto-ThinItalic.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-ThinItalic.woff2) format("woff2");
 font-weight: 100;
 font-style: italic;
 }
@@ -27,7 +27,7 @@ font-family: "Roboto";
 src:
   local("Roboto Light"),
   local("Roboto-Light"),
-  url(/static/fonts/roboto/Roboto-Light.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-Light.woff2) format("woff2");
 font-weight: 300;
 font-style: normal;
 }
@@ -36,7 +36,7 @@ font-family: "Roboto";
 src:
   local("Roboto Light Italic"),
   local("Roboto-LightItalic"),
-  url(/static/fonts/roboto/Roboto-LightItalic.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-LightItalic.woff2) format("woff2");
 font-weight: 300;
 font-style: italic;
 }
@@ -45,7 +45,7 @@ font-family: "Roboto";
 src:
   local("Roboto Regular"),
   local("Roboto-Regular"),
-  url(/static/fonts/roboto/Roboto-Regular.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-Regular.woff2) format("woff2");
 font-weight: 400;
 font-style: normal;
 }
@@ -54,7 +54,7 @@ font-family: "Roboto";
 src:
   local("Roboto Italic"),
   local("Roboto-Italic"),
-  url(/static/fonts/roboto/Roboto-RegularItalic.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-RegularItalic.woff2) format("woff2");
 font-weight: 400;
 font-style: italic;
 }
@@ -63,7 +63,7 @@ font-family: "Roboto";
 src:
   local("Roboto Medium"),
   local("Roboto-Medium"),
-  url(/static/fonts/roboto/Roboto-Medium.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-Medium.woff2) format("woff2");
 font-weight: 500;
 font-style: normal;
 }
@@ -72,7 +72,7 @@ font-family: "Roboto";
 src:
   local("Roboto Medium Italic"),
   local("Roboto-MediumItalic"),
-  url(/static/fonts/roboto/Roboto-MediumItalic.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-MediumItalic.woff2) format("woff2");
 font-weight: 500;
 font-style: italic;
 }
@@ -81,7 +81,7 @@ font-family: "Roboto";
 src:
   local("Roboto Bold"),
   local("Roboto-Bold"),
-  url(/static/fonts/roboto/Roboto-Bold.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-Bold.woff2) format("woff2");
 font-weight: 700;
 font-style: normal;
 }
@@ -90,7 +90,7 @@ font-family: "Roboto";
 src:
   local("Roboto Bold Italic"),
   local("Roboto-BoldItalic"),
-  url(/static/fonts/roboto/Roboto-BoldItalic.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-BoldItalic.woff2) format("woff2");
 font-weight: 700;
 font-style: italic;
 }
@@ -99,7 +99,7 @@ font-family: "Roboto";
 src:
   local("Roboto Black"),
   local("Roboto-Black"),
-  url(/static/fonts/roboto/Roboto-Black.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-Black.woff2) format("woff2");
 font-weight: 900;
 font-style: normal;
 }
@@ -108,7 +108,7 @@ font-family: "Roboto";
 src:
   local("Roboto Black Italic"),
   local("Roboto-BlackItalic"),
-  url(/static/fonts/roboto/Roboto-BlackItalic.woff2) format("woff2");
+  url(${__STATIC_PATH__}fonts/roboto/Roboto-BlackItalic.woff2) format("woff2");
 font-weight: 900;
 font-style: italic;
 }
diff --git a/src/util/common-translation.ts b/src/util/common-translation.ts
index 533822ec9f..9f186314c9 100644
--- a/src/util/common-translation.ts
+++ b/src/util/common-translation.ts
@@ -5,15 +5,15 @@ import {
 import { translationMetadata } from "../resources/translations-metadata";
 import { HomeAssistant } from "../types";
 
-const DEFAULT_BASE_URL = "/static/translations";
+const BASE_URL = `${__STATIC_PATH__}translations`;
 const STORAGE = window.localStorage || {};
 
 // Store loaded translations in memory so translations are available immediately
 // when DOM is created in Polymer. Even a cache lookup creates noticeable latency.
 const translations = {};
 
-async function fetchTranslation(fingerprint: string, base_url: string) {
-  const response = await fetch(`${base_url}/${fingerprint}`, {
+async function fetchTranslation(fingerprint: string) {
+  const response = await fetch(`${BASE_URL}/${fingerprint}`, {
     credentials: "same-origin",
   });
   if (!response.ok) {
@@ -131,13 +131,12 @@ export function getLocalLanguage() {
 
 export async function getTranslation(
   fragment: string | null,
-  language: string,
-  base_url?: string
+  language: string
 ) {
   const metadata = translationMetadata.translations[language];
   if (!metadata?.hash) {
     if (language !== "en") {
-      return getTranslation(fragment, "en", base_url);
+      return getTranslation(fragment, "en");
     }
     throw new Error("Language en is not found in metadata");
   }
@@ -149,16 +148,13 @@ export async function getTranslation(
 
   // Fetch translation from the server
   if (!translations[fingerprint]) {
-    translations[fingerprint] = fetchTranslation(
-      fingerprint,
-      base_url || DEFAULT_BASE_URL
-    )
+    translations[fingerprint] = fetchTranslation(fingerprint)
       .then((data) => ({ language, data }))
       .catch((error) => {
         delete translations[fingerprint];
         if (language !== "en") {
           // Couldn't load selected translation. Try a fall back to en before failing.
-          return getTranslation(fragment, "en", base_url);
+          return getTranslation(fragment, "en");
         }
         return Promise.reject(error);
       });