🩹(frontend) icon font loading to avoid text/icon flickering

Icon fonts were loading just in time, which is good for performance, but caused
a visible blink where fallback text appeared before the font loaded. I followed
the documentation introduced in PR 963 of the fontsource repository.

This introduces preloading for critical fonts, slightly increases initial load
time, and defines custom @font-face rules to control font-display and avoid
font swapping. This approach only works with Vite-based frameworks,
as noted in the documentation.

See the advanced installation section for material-symbols-outlined on
fontsource.org, and apply the same approach for Material Icons.

I manually built the preload headers based on a comment from issue #83.
This works well with Vite, which replaces the font URLs at build time.

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to
 ### Fixed
 
 - 🐛(frontend) remove unexpected F2 tooltip when clicking video screen 
+- 🩹(frontend) icon font loading to avoid text/icon flickering
 
 ## [1.2.0] - 2026-01-05
 

src/frontend/index.html

@@ -6,6 +6,22 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
+    <!-- Font URLs are resolved and replaced by Vite during the build process. Font loading failures will not break the application. -->
+    <link
+      rel="preload"
+      as="font"
+      crossorigin="anonymous"
+      href="/node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-latin-400-normal.woff2"
+      type="font/woff2"
+    />
+    <!-- Font URLs are resolved and replaced by Vite during the build process. Font loading failures will not break the application. -->
+    <link
+      rel="preload"
+      as="font"
+      crossorigin="anonymous"
+      href="/node_modules/@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-wght-normal.woff2"
+      type="font/woff2"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%VITE_APP_TITLE%</title>
   </head>

src/frontend/src/App.tsx

@@ -1,5 +1,3 @@
-import '@fontsource/material-icons-outlined'
-import '@fontsource-variable/material-symbols-outlined'
 import '@livekit/components-styles'
 import '@/styles/index.css'
 import { Suspense } from 'react'

src/frontend/src/styles/index.css

@@ -53,3 +53,36 @@ body:has(.lk-video-conference) #crisp-chatbox > * > div[role='button'] {
     transform: translateY(0);
   }
 }
+
+/* Generated using the Advanced installation guidelines from
+ * https://fontsource.org/fonts/material-icons-outlined/install
+ */
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-display: block;
+  font-weight: 400;
+  src: url(@fontsource/material-icons-outlined/files/material-icons-outlined-latin-400-normal.woff2)
+    format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Generated using the Advanced installation guidelines from
+ * https://fontsource.org/fonts/material-symbols-outlined/install
+ */
+/* material-symbols-outlined-latin-wght-normal */
+@font-face {
+  font-family: 'Material Symbols Outlined Variable';
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 700;
+  src: url(@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-wght-normal.woff2)
+    format('woff2-variations');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}