diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index dc3d4994e2..0b045fddd8 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -5,18 +5,6 @@
     <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
     <link rel="icon" href="/static/icons/favicon.ico" />
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Regular.woff2"
-      as="font"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Medium.woff2"
-      as="font"
-      crossorigin
-    />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
@@ -96,6 +84,7 @@
     <div id="ha-init-skeleton"></div>
     <ha-demo></ha-demo>
     <%= renderTemplate('_js_base') %>
+    <%= renderTemplate('_preload_roboto') %>
 
     <script type="module" src="<%= latestDemoJS %>"></script>
 
diff --git a/src/entrypoints/core.ts b/src/entrypoints/core.ts
index dc2ee49e8b..8a6bedf9db 100644
--- a/src/entrypoints/core.ts
+++ b/src/entrypoints/core.ts
@@ -28,6 +28,7 @@ import { HomeAssistant } from "../types";
 declare global {
   interface Window {
     hassConnection: Promise<{ auth: Auth; conn: Connection }>;
+    hassConnectionReady?: (hassConnection: Window["hassConnection"]) => void;
   }
 }
 
@@ -82,6 +83,11 @@ window.hassConnection = (authProm() as Promise<Auth | ExternalAuth>).then(
   connProm
 );
 
+// This is set if app was somehow loaded before core.
+if (window.hassConnectionReady) {
+  window.hassConnectionReady(window.hassConnection);
+}
+
 // Start fetching some of the data that we will need.
 window.hassConnection.then(({ conn }) => {
   const noop = () => {
diff --git a/src/html/_preload_roboto.html.template b/src/html/_preload_roboto.html.template
new file mode 100644
index 0000000000..6ac777eb8e
--- /dev/null
+++ b/src/html/_preload_roboto.html.template
@@ -0,0 +1,16 @@
+    <script>
+      if (navigator.userAgent.indexOf("Android") === -1 &&
+          navigator.userAgent.indexOf("CrOS") === -1) {
+        function _pf(src, type) {
+          const el = document.createElement("link");
+          el.rel = "preload";
+          el.as = "font";
+          el.type = "font/woff2";
+          el.href = src;
+          el.crossOrigin = "anonymous";
+          document.head.append(el);
+        }
+        _pf("/static/fonts/roboto/Roboto-Regular.woff2");
+        _pf("/static/fonts/roboto/Roboto-Medium.woff2");
+      }
+    </script>
diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template
index f57c709147..3cbcfda5ce 100644
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -3,18 +3,6 @@
   <head>
     <title>Home Assistant</title>
     <link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin="use-credentials" />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Light.woff2"
-      as="font"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Regular.woff2"
-      as="font"
-      crossorigin
-    />
     <%= renderTemplate('_header') %>
     <style>
       .content {
@@ -46,6 +34,7 @@
     </div>
 
     <%= renderTemplate('_js_base') %>
+    <%= renderTemplate('_preload_roboto') %>
 
     <script type="module" crossorigin="use-credentials">
       import "<%= latestPageJS %>";
diff --git a/src/html/index.html.template b/src/html/index.html.template
index 231534cdcc..e549946f6e 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -2,18 +2,7 @@
 <html>
   <head>
     <link rel="preload" href="<%= latestCoreJS %>" as="script" crossorigin="use-credentials" />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Regular.woff2"
-      as="font"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Medium.woff2"
-      as="font"
-      crossorigin
-    />
+    <link rel="preload" href="<%= latestAppJS %>" as="script" crossorigin="use-credentials" />
     <%= renderTemplate('_header') %>
     <title>Home Assistant</title>
     <link
@@ -61,10 +50,11 @@
     <home-assistant> </home-assistant>
 
     <%= renderTemplate('_js_base') %>
+    <%= renderTemplate('_preload_roboto') %>
 
     <script type="module" crossorigin="use-credentials">
-      import "<%= latestCoreJS %>";
-      import "<%= latestAppJS %>";
+      import("<%= latestCoreJS %>");
+      import("<%= latestAppJS %>");
       window.customPanelJS = "<%= latestCustomPanelJS %>";
     </script>
     {% for extra_module in extra_modules -%}
@@ -81,6 +71,8 @@
 
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
+              // Although core and app can load in any order, we need to
+              // force loading core first because it contains polyfills
               return System.import("<%= es5CoreJS %>").then(function() {
                 System.import("<%= es5AppJS %>");
               });
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index ef2eb537c5..6acf158b58 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -3,18 +3,6 @@
   <head>
     <title>Home Assistant</title>
     <link rel="preload" href="<%= latestPageJS %>" as="script" crossorigin="use-credentials" />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Light.woff2"
-      as="font"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Regular.woff2"
-      as="font"
-      crossorigin
-    />
     <%= renderTemplate('_header') %>
     <style>
       .content {
@@ -48,6 +36,7 @@
     </div>
 
     <%= renderTemplate('_js_base') %>
+    <%= renderTemplate('_preload_roboto') %>
 
     <script type="module" crossorigin="use-credentials">
       import "<%= latestPageJS %>";
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts
index e38acec094..3e4f551fff 100644
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -93,7 +93,18 @@ export class HomeAssistantAppEl extends HassElement {
 
   protected async _initialize() {
     try {
-      const { auth, conn } = await window.hassConnection;
+      let result;
+
+      if (window.hassConnection) {
+        result = await window.hassConnection;
+      } else {
+        // In the edge case that
+        result = await new Promise((resolve) => {
+          window.hassConnectionReady = resolve;
+        });
+      }
+
+      const { auth, conn } = result;
       this._haVersion = conn.haVersion;
       this.initializeHass(auth, conn);
     } catch (err) {
