diff --git a/CHANGELOG.md b/CHANGELOG.md
index 200a8d06..a54f12e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,7 +25,8 @@ and this project adheres to
 
 ### Fixed
 
-- 🐛(frontend) remove unexpected F2 tooltip when clicking video screen
+- 🐛(frontend) remove unexpected F2 tooltip when clicking video screen 
+- 🩹(frontend) icon font loading to avoid text/icon flickering
 
 ## [1.2.0] - 2026-01-05
 
diff --git a/src/frontend/index.html b/src/frontend/index.html
index d6a3eff2..f4720d6d 100644
--- a/src/frontend/index.html
+++ b/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>
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 4bcf5ec8..0a1d3c7e 100644
--- a/src/frontend/src/App.tsx
+++ b/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'
diff --git a/src/frontend/src/styles/index.css b/src/frontend/src/styles/index.css
index ed758e84..b74f3516 100644
--- a/src/frontend/src/styles/index.css
+++ b/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;
+}