字体文件本地化

src/app/globals.css

@@ -45,7 +45,7 @@ html {
 /* GLOBAL VARIABLES :root中定义常规变量，不被映射到工具类*/
 :root {
   /* Font families */
-  font-family: var(--font-outfit), system-ui, sans-serif;
+  font-family: var(--font-outfit-variable), system-ui, sans-serif;
   --background: #ffffff;
   --foreground: #000;
   --color-selected-black: #00000099;
@@ -70,9 +70,6 @@ html {
 
 /*theme中定义的变量可以被映射到实用程序类(需要注意映射规则，不是所有变量都能映射)*/
 @theme {
-  /* 仅保留字体族定义，其他通过 :root 变量注入 */
-  --font-family-outfit: var(--font-outfit), system-ui, sans-serif;
-
   /*自定义颜色*/
   --color-ly-inputborder: #e5e5e5;
   --color-ly-placeholder: #A6A6A6;
@@ -121,6 +118,7 @@ html {
   比如 定义了一个变量--color-background，--color-background引用的是另一个变量
 */
 @theme inline {
+  --font-outfit: var(--font-outfit-variable), system-ui, sans-serif;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-font-color: var(--font-color);
@@ -137,7 +135,6 @@ html {
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-outfit), system-ui, sans-serif;
 }
 
 @layer components {

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import Script from 'next/script'
-import { Outfit } from "next/font/google";
+import localFont from "next/font/local";
 import "./globals.css";
 import { GlobalProviders,ReduxProvider,PayPalWrapper,ConfigProvider } from "@/providers";
 import { generateMetadataForPage } from "@utils/helper";
@@ -30,11 +30,12 @@ const __srOnly: React.CSSProperties = {
   border: 0,
 };
 
-export const outfit = Outfit({
-  subsets: ["latin", "latin-ext"],
-  weight: ["400", "600"],
-  variable: "--font-outfit",
-  display: "optional",
+// https://nextjs.org/docs/app/api-reference/components/font#local-fonts
+export const outfit = localFont({
+  src: '../assets/fonts/Outfit_Variable_weight_100_900.woff2',
+  variable: "--font-outfit-variable",
+  weight: "100 900",
+  display: "swap",
   preload: true,
 });