diff --git a/web/app/components/billing/pricing/InstrumentSerif-Italic-Latin.woff2 b/web/app/components/billing/pricing/InstrumentSerif-Italic-Latin.woff2
new file mode 100644
index 0000000000..5d1fd32cb0
Binary files /dev/null and b/web/app/components/billing/pricing/InstrumentSerif-Italic-Latin.woff2 differ
diff --git a/web/app/components/billing/pricing/header.module.css b/web/app/components/billing/pricing/header.module.css
new file mode 100644
index 0000000000..fc05646d86
--- /dev/null
+++ b/web/app/components/billing/pricing/header.module.css
@@ -0,0 +1,24 @@
+.instrumentSerif {
+  font-family: "Instrument Serif", serif;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Instrument Serif";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./InstrumentSerif-Italic-Latin.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF,
+    U+0100-024F,
+    U+0259,
+    U+0300-036F,
+    U+1E00-1EFF,
+    U+2010-205E,
+    U+20A0-20CF,
+    U+2113,
+    U+2212,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}
diff --git a/web/app/components/billing/pricing/header.tsx b/web/app/components/billing/pricing/header.tsx
index b130f23981..5844fcf264 100644
--- a/web/app/components/billing/pricing/header.tsx
+++ b/web/app/components/billing/pricing/header.tsx
@@ -1,8 +1,10 @@
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
 import Button from '../../base/button'
 import DifyLogo from '../../base/logo/dify-logo'
+import styles from './header.module.css'
 
 type HeaderProps = {
   onClose: () => void
@@ -20,11 +22,16 @@ const Header = ({
           <div className="py-[5px]">
             <DifyLogo className="h-[27px] w-[60px]" />
           </div>
-          <span className="bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent">
+          <span
+            className={cn(
+              'bg-billing-plan-title-bg bg-clip-text px-1.5 text-[37px] leading-[1.2] text-transparent',
+              styles.instrumentSerif,
+            )}
+          >
             {t('plansCommon.title.plans', { ns: 'billing' })}
           </span>
         </div>
-        <p className="system-sm-regular text-text-tertiary">
+        <p className="text-text-tertiary system-sm-regular">
           {t('plansCommon.title.description', { ns: 'billing' })}
         </p>
         <Button
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 2d814162d1..fd9548600c 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -2,14 +2,12 @@ import type { Viewport } from 'next'
 import { Agentation } from 'agentation'
 import { Provider as JotaiProvider } from 'jotai/react'
 import { ThemeProvider } from 'next-themes'
-import { Instrument_Serif } from 'next/font/google'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import { IS_DEV } from '@/config'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { getDatasetMap } from '@/env'
 import { getLocaleOnServer } from '@/i18n-config/server'
-import { cn } from '@/utils/classnames'
 import { ToastProvider } from './components/base/toast'
 import { TooltipProvider } from './components/base/ui/tooltip'
 import BrowserInitializer from './components/browser-initializer'
@@ -28,13 +26,6 @@ export const viewport: Viewport = {
   userScalable: false,
 }
 
-const instrumentSerif = Instrument_Serif({
-  weight: ['400'],
-  style: ['normal', 'italic'],
-  subsets: ['latin'],
-  variable: '--font-instrument-serif',
-})
-
 const LocaleLayout = async ({
   children,
 }: {
@@ -44,7 +35,7 @@ const LocaleLayout = async ({
   const datasetMap = getDatasetMap()
 
   return (
-    <html lang={locale ?? 'en'} className={cn('h-full', instrumentSerif.variable)} suppressHydrationWarning>
+    <html lang={locale ?? 'en'} className="h-full" suppressHydrationWarning>
       <head>
         <link rel="manifest" href="/manifest.json" />
         <meta name="theme-color" content="#1C64F2" />
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 5b7f0e3bc1..ec0e9e96b3 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -2839,11 +2839,6 @@
       "count": 2
     }
   },
-  "app/components/billing/pricing/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/billing/pricing/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index 20dfc09e30..3a813274d4 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -113,9 +113,6 @@ const config = {
         2: '0.02',
         8: '0.08',
       },
-      fontFamily: {
-        instrument: ['var(--font-instrument-serif)', 'serif'],
-      },
       fontSize: {
         '2xs': '0.625rem',
       },
