From 69d92e6f30b4b932b424043a75d0e0e87055e5d8 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Thu, 8 Jan 2026 13:23:44 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20icon=20font=20loading?= =?UTF-8?q?=20to=20avoid=20text/icon=20flickering?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 3 ++- src/frontend/index.html | 16 +++++++++++++++ src/frontend/src/App.tsx | 2 -- src/frontend/src/styles/index.css | 33 +++++++++++++++++++++++++++++++ 4 files changed, 51 insertions(+), 3 deletions(-) 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 @@ + + + + %VITE_APP_TITLE% 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; +}