mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-06 00:47:47 +00:00
lebaudantoine
69d92e6f30
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.
33 lines
1.3 KiB
HTML
33 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-lk-theme="visio-light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<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>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|