Preload woff2 font files

src/api/proxies.ts

@@ -67,5 +67,8 @@ export async function updateProviderByName(config: ClashAPIConfig, name: string)
 export async function healthcheckProviderByName(config: ClashAPIConfig, name: string) {
   const { url, init } = getURLAndInit(config);
   const options = { ...init, method: 'GET' };
-  return await fetch(url + '/providers/proxies/' + encodeURIComponent(name) + '/healthcheck', options);
+  return await fetch(
+    url + '/providers/proxies/' + encodeURIComponent(name) + '/healthcheck',
+    options
+  );
 }

src/app.tsx

@@ -1,6 +1,12 @@
 import 'modern-normalize/modern-normalize.css';
 import './misc/i18n';
+import '@fontsource/roboto-mono/latin-400.css';
+import '@fontsource/inter/latin-400.css';
+import '@fontsource/inter/latin-800.css';
 
+import inter400 from '@fontsource/inter/files/inter-latin-400-normal.woff2';
+import inter800 from '@fontsource/inter/files/inter-latin-800-normal.woff2';
+import robotoMono400 from '@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import Modal from 'react-modal';
@@ -8,9 +14,28 @@ import Modal from 'react-modal';
 import Root from './components/Root';
 import * as swRegistration from './swRegistration';
 
+init();
+
 const rootEl = document.getElementById('app');
 const root = createRoot(rootEl);
 
+function insertLinkElement(href: string) {
+  const l = document.createElement('link');
+  l.href = href;
+  l.rel = 'preload';
+  l.as = 'font';
+  l.crossOrigin = '';
+
+  document.head.appendChild(l);
+}
+
+function init() {
+  // preload woff2 font files
+  insertLinkElement(inter400);
+  insertLinkElement(inter800);
+  insertLinkElement(robotoMono400);
+}
+
 Modal.setAppElement(rootEl);
 
 root.render(

src/components/Root.tsx

@@ -1,7 +1,4 @@
 import './Root.scss';
-import '@fontsource/roboto-mono/latin-400.css';
-import '@fontsource/inter/latin-400.css';
-import '@fontsource/inter/latin-800.css';
 
 import { QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';

src/custom.d.ts

@@ -10,6 +10,7 @@ declare module '*.module.scss' {
   const classes: { [key: string]: string };
   export default classes;
 }
+declare module '*.woff2';
 
 interface Window {
   i18n: any;