refactor(web): optimize font loading and update font usage across com…

apps/web/index.html

@@ -8,41 +8,24 @@
     <meta
       name="description"
       content="Refly is a free-form canvas creation platform powered by multi-threaded dialogue, knowledge integration, context memory, intelligent search and WYSIWYG AI editor, easily transforms ideas into quality content." />
-    <style>
-      @font-face {
-        font-family: "Alibaba PuHuiTi";
-        font-weight: bold;
-        font-display: swap;
-        src:
-          url("https://static.refly.ai/landing/Alibaba-PuHuiTi-Bold.woff2")
-            format("woff2"),
-          url("https://static.refly.ai/landing/Alibaba-PuHuiTi-Bold.ttf")
-            format("truetype");
-      }
+
+    <!-- Preconnect to static assets domain -->
+    <link rel="preconnect" href="https://static.refly.ai" crossorigin />
+    <link rel="dns-prefetch" href="https://static.refly.ai" />
 
-      @font-face {
-        font-family: "Alibaba PuHuiTi";
-        font-weight: 300;
-        font-display: swap;
-        src:
-          url("https://static.refly.ai/landing/AlibabaPuHuiTi-3-45-Light.woff2")
-            format("woff2"),
-          url("https://static.refly.ai/landing/AlibabaPuHuiTi-3-45-Light.ttf")
-            format("truetype");
-      }
-    </style>
+    <!-- Preload critical fonts -->
     <link
       rel="preload"
       href="https://static.refly.ai/landing/Alibaba-PuHuiTi-Bold.woff2"
       as="font"
       type="font/woff2"
-      crossorigin="anonymous" />
+      crossorigin />
     <link
       rel="preload"
       href="https://static.refly.ai/landing/AlibabaPuHuiTi-3-45-Light.woff2"
       as="font"
       type="font/woff2"
-      crossorigin="anonymous" />
+      crossorigin />
   </head>
   <script
     async

apps/web/src/components/landing-page-partials/FeaturesBlocks.tsx

@@ -89,7 +89,7 @@ const FeatureCard = ({
                   style={{ backgroundColor: feature?.color ?? "#37C390" }}>
                   ✓
                 </span>
-                <span className="font-['Alibaba_PuHuiTi_Light',system-ui,-apple-system,sans-serif] leading-6 text-gray-700">
+                <span className="font-alibaba text-base font-light leading-6 text-gray-700">
                   {point}
                 </span>
               </li>
@@ -195,7 +195,7 @@ function FeaturesBlocks() {
           <span>{header?.tag}</span>
         </span>
         <section className="text-center">
-          <h1 className="font-['Alibaba_PuHuiTi_Bold',system-ui,-apple-system,sans-serif] text-3xl md:text-4xl">
+          <h1 className="font-alibaba text-3xl font-bold md:text-4xl">
             {i18n.language === "zh-CN" ? (
               <>
                 Refly

apps/web/src/components/landing-page-partials/Footer.tsx

@@ -54,7 +54,7 @@ function Footer() {
         <div className="mx-auto w-full max-w-7xl md:w-[70%]">
           {/* CTA Block */}
           <div
-            className="mb-[72px] flex h-[380px] w-full flex-col items-center justify-center rounded-[20px] border border-[#E3E3E3] p-12 text-center font-['Alibaba_PuHuiTi_Bold',system-ui,-apple-system,sans-serif]"
+            className="mb-[72px] flex h-[380px] w-full flex-col items-center justify-center rounded-[20px] border border-[#E3E3E3] p-12 text-center font-alibaba text-3xl font-bold"
             style={{
               backgroundImage:
                 "linear-gradient(180deg, #F8E2D3 0%, #FCFBFA 95%, #FCFAF9 100%, #FCFCFC 100%, #FFFFFF 100%)",

apps/web/src/components/landing-page-partials/HeroHome.tsx

@@ -83,7 +83,7 @@ function HeroHome() {
 
               <h1
                 className={cn(
-                  "mb-5 flex max-w-7xl flex-col font-['Alibaba_PuHuiTi_Bold',system-ui,-apple-system,sans-serif]",
+                  "flex-col font-alibaba text-7xl font-bold",
                   "text-[3rem] !tracking-[-0.2rem] sm:mb-6 sm:text-[5rem]",
                   isZhCN ? "leading-[1.2]" : "leading-[0.9]",
                 )}>
@@ -187,7 +187,7 @@ function HeroHome() {
                   </svg>
                 </span>
               </h1>
-              <p className="flex max-w-[18rem] flex-col items-center gap-0.5 font-['Alibaba_PuHuiTi_Light',system-ui,-apple-system,sans-serif] text-base !leading-[1.3] !tracking-[-0.02rem] sm:max-w-xl sm:text-lg">
+              <p className="flex max-w-[18rem] flex-col items-center gap-0.5 font-alibaba text-base font-light !leading-[1.3] !tracking-[-0.02rem] sm:max-w-xl sm:text-lg">
                 <span className="span-wrap-styles text-[rgba(0, 0, 0, .5)]">
                   {t("landingPage.simplyDescription.first")}
                 </span>

apps/web/src/main.tsx

@@ -57,13 +57,12 @@ const initSentry = async () => {
           matchRoutes,
         }),
       ],
-      // Performance Monitoring
-      tracesSampleRate: 1.0, //  Capture 100% of the transactions
-      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+      // Reduce sampling rates to minimize performance impact
+      tracesSampleRate: 0.1, // Reduce from 1.0 to 0.1 (10% sampling)
       tracePropagationTargets: ["localhost", "https://refly.ai"],
       // Session Replay
-      replaysSessionSampleRate: 0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-      replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+      replaysSessionSampleRate: 0.05, // Reduce from 0 to 0.05 (5% sampling)
+      replaysOnErrorSampleRate: 0.2, // Reduce from 1.0 to 0.2 (20% sampling on errors)
     })
   }
 }

apps/web/src/styles/fonts.scss

@@ -1,27 +1,43 @@
+/* Define Alibaba PuHuiTi font family */
 @font-face {
-  font-family: "Alibaba PuHuiTi Bold";
+  font-family: "Alibaba PuHuiTi";
   src:
+    local("Alibaba PuHuiTi Bold"),
     url("https://static.refly.ai/landing/Alibaba-PuHuiTi-Bold.woff2")
-      format("woff2"),
-    url("https://static.refly.ai/landing/Alibaba-PuHuiTi-Bold.ttf")
-      format("truetype");
-  font-weight: bold;
+      format("woff2");
+  font-weight: 700; /* bold */
   font-style: normal;
   font-display: swap;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  unicode-range: U+4E00-9FFF; /* Chinese characters only */
 }
 
 @font-face {
-  font-family: "Alibaba PuHuiTi Light";
+  font-family: "Alibaba PuHuiTi";
   src:
+    local("Alibaba PuHuiTi Light"),
     url("https://static.refly.ai/landing/AlibabaPuHuiTi-3-45-Light.woff2")
-      format("woff2"),
-    url("https://static.refly.ai/landing/AlibabaPuHuiTi-3-45-Light.ttf")
-      format("truetype");
-  font-weight: light;
+      format("woff2");
+  font-weight: 200; /* light */
   font-style: normal;
   font-display: swap;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  unicode-range: U+4E00-9FFF; /* Chinese characters only */
+}
+
+/* CSS Variables for font stacks */
+:root {
+  --font-alibaba: "Alibaba PuHuiTi", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, sans-serif;
+}
+
+/* Utility classes */
+.font-alibaba {
+  font-family: var(--font-alibaba);
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-light {
+  font-weight: 200;
 }

apps/web/tailwind.config.ts

@@ -104,7 +104,7 @@ export default {
       fontFamily: {
         inter: ["Inter", "sans-serif"],
         "architects-daughter": ['"Architects Daughter"', "sans-serif"],
-        alibaba: ["Alibaba PuHuiTi", "sans-serif"],
+        alibaba: ["Alibaba PuHuiTi", "system-ui", "sans-serif"],
       },
       fontSize: {
         xs: "0.75rem",
@@ -267,6 +267,10 @@ export default {
         backgroundPositionSpin:
           "background-position-spin 3000ms infinite alternate",
       },
+      fontWeight: {
+        light: "300",
+        bold: "700",
+      },
     },
   },
   plugins: [