diff --git a/src/html/_style_base.html.template b/src/html/_style_base.html.template
index 0e06158ebbe1..ca503868fe6f 100644
--- a/src/html/_style_base.html.template
+++ b/src/html/_style_base.html.template
@@ -1,8 +1,7 @@
-<meta name='viewport' content='width=device-width, user-scalable=no, viewport-fit=cover, initial-scale=1'>
+<meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=cover, initial-scale=1">
 <style>
-
   body {
-    font-family: Roboto, sans-serif;
+    font-family: Roboto, Noto, Noto Sans, sans-serif;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-weight: 400;
diff --git a/src/html/index.html.template b/src/html/index.html.template
index faca8c9f06e8..183bc7e5614e 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -23,6 +23,7 @@
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);
+        height: 100vh;
       }
       @media (prefers-color-scheme: dark) {
         html {
@@ -30,15 +31,6 @@
           color: var(--primary-text-color, #e1e1e1);
         }
       }
-      body {
-        font-family: Roboto, Noto, sans-serif;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        font-weight: 400;
-        height: 100vh;
-        margin: 0;
-        padding: 0;
-      }
       #ha-launch-screen {
         height: 100%;
         display: flex;