fix: #1444 async load google fonts

Yidadaa · Yidadaa · commit 03163d6a6185 · 2023-05-14T23:25:22.000+08:00
diff --git a/app/components/home.tsx b/app/components/home.tsx
@@ -23,7 +23,6 @@ import {
 } from "react-router-dom";
 import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
-import { useMaskStore } from "../store/mask";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -91,12 +90,24 @@ const useHasHydrated = () => {
   return hasHydrated;
 };
 
+const loadAsyncGoogleFont = () => {
+  const linkEl = document.createElement("link");
+  linkEl.rel = "stylesheet";
+  linkEl.href =
+    "/google-fonts/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap";
+  document.head.appendChild(linkEl);
+};
+
 function Screen() {
   const config = useAppConfig();
   const location = useLocation();
   const isHome = location.pathname === Path.Home;
   const isMobileScreen = useMobileScreen();
 
+  useEffect(() => {
+    loadAsyncGoogleFont();
+  }, []);
+
   return (
     <div
       className={
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -34,11 +34,6 @@ export default function RootLayout({
       <head>
         <meta name="version" content={buildConfig.commitId} />
         <link rel="manifest" href="/site.webmanifest"></link>
-        <link rel="preconnect" href="https://fonts.proxy.ustclug.org"></link>
-        <link
-          rel="stylesheet"
-          href="https://fonts.proxy.ustclug.org/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap"
-        ></link>
         <script src="/serviceWorkerRegister.js" defer></script>
       </head>
       <body>{children}</body>
diff --git a/next.config.mjs b/next.config.mjs
@@ -10,6 +10,10 @@ const nextConfig = {
         source: "/api/proxy/:path*",
         destination: "https://api.openai.com/:path*",
       },
+      {
+        source: "/google-fonts/:path*",
+        destination: "https://fonts.googleapis.com/:path*",
+      },
     ];
 
     const apiUrl = process.env.API_URL;
