diff --git a/pages/_document.js b/pages/_document.js
index b2649d79..9c8beadb 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -28,7 +28,7 @@ class MyDocument extends Document {
                   })}
                 </Head>
 
-                <body className={`${BLOG.FONT_STYLE} dark:bg-black scroll-smooth`}>
+                <body>
                     <Main />
                     <NextScript />
                 </body>
diff --git a/themes/example/components/ArticleLock.js b/themes/example/components/ArticleLock.js
index 4957946d..3744c183 100644
--- a/themes/example/components/ArticleLock.js
+++ b/themes/example/components/ArticleLock.js
@@ -28,7 +28,7 @@ export const ArticleLock = props => {
     passwordInputRef.current.focus()
   }, [])
 
-  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
+  return <div id='container' className='w-full flex justify-center items-center h-96 '>
         <div className='text-center space-y-3'>
             <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
             <div className='flex mx-4'>
diff --git a/themes/example/components/ExampleRecentComments.js b/themes/example/components/ExampleRecentComments.js
index e5097740..9dbdfa7f 100644
--- a/themes/example/components/ExampleRecentComments.js
+++ b/themes/example/components/ExampleRecentComments.js
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
         </div>)}
 
   </>
diff --git a/themes/example/index.js b/themes/example/index.js
index ed1c5bda..54d88281 100644
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -62,7 +62,7 @@ const LayoutBase = props => {
   //   }, [onLoading])
 
   return (
-        <div id='theme-example' className='dark:text-gray-300  bg-white dark:bg-black'>
+        <div id='theme-example' className={`${siteConfig('FONT_STYLE')} dark:text-gray-300  bg-white dark:bg-black scroll-smooth`} >
 
             <Style/>
 
diff --git a/themes/fukasawa/components/ArticleLock.js b/themes/fukasawa/components/ArticleLock.js
index 77ec5659..6acd6f69 100644
--- a/themes/fukasawa/components/ArticleLock.js
+++ b/themes/fukasawa/components/ArticleLock.js
@@ -31,7 +31,7 @@ const ArticleLock = props => {
 
   return (<div id='container' className="flex justify-center">
     <div className="shadow md:hover:shadow-2xl overflow-x-auto max-w-5xl  w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200 subpixel-antialiased">
-      <div className="w-full flex justify-center items-center h-96 font-sans">
+      <div className="w-full flex justify-center items-center h-96 ">
         <div className="text-center space-y-3 dark:text-gray-300 text-black">
           <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
           <div className="flex mx-4">
diff --git a/themes/fukasawa/components/Catalog.js b/themes/fukasawa/components/Catalog.js
index 9f0a054c..a69bfbd3 100644
--- a/themes/fukasawa/components/Catalog.js
+++ b/themes/fukasawa/components/Catalog.js
@@ -63,7 +63,7 @@ const Catalog = ({ toc }) => {
   return <div id='catalog'>
     <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
     <div className='h-96'>
-      <nav ref={tRef} className='h-full overflow-y-auto overscroll-none scroll-hidden font-sans text-black'>
+      <nav ref={tRef} className='h-full overflow-y-auto overscroll-none scroll-hidden  text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
           return (
diff --git a/themes/fukasawa/components/MenuList.js b/themes/fukasawa/components/MenuList.js
index 0445f338..6b5be406 100644
--- a/themes/fukasawa/components/MenuList.js
+++ b/themes/fukasawa/components/MenuList.js
@@ -30,10 +30,10 @@ export const MenuList = (props) => {
   }
 
   return (<>
-        <menu id='nav-pc' className='hidden md:block font-sans text-sm z-10'>
+        <menu id='nav-pc' className='hidden md:block  text-sm z-10'>
             {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
         </menu>
-        <menu id='nav-mobile' className='block md:hidden font-sans text-sm z-10 pb-1'>
+        <menu id='nav-mobile' className='block md:hidden  text-sm z-10 pb-1'>
             {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={props.onHeightChange}/>)}
         </menu>
     </>
diff --git a/themes/fukasawa/components/SiteInfo.js b/themes/fukasawa/components/SiteInfo.js
index 95472442..7005a552 100644
--- a/themes/fukasawa/components/SiteInfo.js
+++ b/themes/fukasawa/components/SiteInfo.js
@@ -8,7 +8,7 @@ function SiteInfo ({ title }) {
 
   return (
         <footer
-            className='relative leading-6 justify-start w-full text-gray-600 dark:text-gray-300 text-xs font-sans'
+            className='relative leading-6 justify-start w-full text-gray-600 dark:text-gray-300 text-xs '
         >
             <span> © {`${copyrightDate}`} <span> <a href={siteConfig('LINK')}> <i className='mx-1 animate-pulse fas fa-heart'/> {siteConfig('AUTHOR')}</a>. <br /></span>
 
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
index 4d5bfe43..2713e4e6 100644
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -50,7 +50,7 @@ const LayoutBase = (props) => {
   return (
         <ThemeGlobalFukasawa.Provider value={{}}>
 
-            <div id='theme-fukasawa'>
+            <div id='theme-fukasawa' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
                 <Style/>
 
                 <TopNav {...props} />
diff --git a/themes/gitbook/components/NavPostItem.js b/themes/gitbook/components/NavPostItem.js
index e83046ce..b357b1af 100644
--- a/themes/gitbook/components/NavPostItem.js
+++ b/themes/gitbook/components/NavPostItem.js
@@ -19,9 +19,8 @@ const NavPostItem = (props) => {
 
   if (group?.category) {
     return <>
-            <div
-                onClick={toggleOpenSubMenu}
-                className='select-none flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
+            <div onClick={toggleOpenSubMenu}
+                className='select-none flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
                 <span>{group?.category}</span>
                 <div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
             </div>
diff --git a/themes/gitbook/components/TopNavBar.js b/themes/gitbook/components/TopNavBar.js
index 371a7db1..c92df55d 100644
--- a/themes/gitbook/components/TopNavBar.js
+++ b/themes/gitbook/components/TopNavBar.js
@@ -55,7 +55,7 @@ export default function TopNavBar(props) {
                 <LogoBar {...props} />
 
                 {/* 折叠按钮、仅移动端显示 */}
-                <div className='mr-1 flex md:hidden justify-end items-center space-x-4 font-serif dark:text-gray-200'>
+                <div className='mr-1 flex md:hidden justify-end items-center space-x-4  dark:text-gray-200'>
                     <DarkModeButton className='flex text-md items-center h-full' />
                     <div onClick={toggleMenuOpen} className='cursor-pointer text-lg hover:scale-110 duration-150'>
                         {isOpen ? <i className='fas fa-times' /> : <i className="fa-solid fa-ellipsis-vertical"/>}
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index d4bb22a1..075c3dc6 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -66,7 +66,7 @@ const LayoutBase = (props) => {
         <ThemeGlobalGitbook.Provider value={{ searchModal, tocVisible, changeTocVisible, filteredNavPages, setFilteredNavPages, allNavPages, pageNavVisible, changePageNavVisible }}>
             <Style/>
 
-            <div id='theme-gitbook' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
+            <div id='theme-gitbook' className={`${siteConfig('FONT_STYLE')} scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
                 <AlgoliaSearchModal cRef={searchModal} {...props}/>
 
                 {/* 顶部导航栏 */}
@@ -77,7 +77,7 @@ const LayoutBase = (props) => {
                     {/* 左侧推拉抽屉 */}
                     {fullWidth
                       ? null
-                      : (<div className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}>
+                      : (<div className={'hidden md:block border-r dark:border-transparent relative z-10 '}>
                         <div className='w-72 py-14 px-6 sticky top-0 overflow-y-scroll h-screen scroll-hidden'>
                             {slotLeft}
                             <SearchInput className='my-3 rounded-md' />
diff --git a/themes/heo/components/MenuItemDrop.js b/themes/heo/components/MenuItemDrop.js
index d6381d03..97128d5f 100644
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -16,13 +16,13 @@ export const MenuItemDrop = ({ link }) => {
             <Link
                 target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
                 href={link?.to}
-                className="font-sans hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest">
+                className=" hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest">
                 {link?.icon && <i className={link?.icon} />} {link?.name}
             </Link>}
 
         {/* 含子菜单的按钮 */}
         {hasSubMenu && <>
-            <div className='cursor-pointer font-sans hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest'>
+            <div className='cursor-pointer  hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest'>
                 {link?.icon && <i className={link?.icon} />} {link?.name}
             </div>
         </>}
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 239f30dc..6c87aab0 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -83,7 +83,7 @@ const LayoutBase = props => {
   return (
     <div
       id="theme-heo"
-      className="bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col"
+      className={`${siteConfig('FONT_STYLE')} bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col scroll-smooth`}
     >
 
       <Style />
diff --git a/themes/hexo/components/MenuItemDrop.js b/themes/hexo/components/MenuItemDrop.js
index 6f999394..68567382 100644
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -14,13 +14,13 @@ export const MenuItemDrop = ({ link }) => {
         {!hasSubMenu &&
             <Link
                 href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="font-sans menu-link pl-2 pr-4 no-underline tracking-widest pb-1">
+                className=" menu-link pl-2 pr-4 no-underline tracking-widest pb-1">
                 {link?.icon && <i className={link?.icon}/>} {link?.name}
                 {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
             </Link>}
 
         {hasSubMenu && <>
-            <div className='cursor-pointer font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+            <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
                 {link?.icon && <i className={link?.icon}/>} {link?.name}
                 <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
             </div>
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
index 4015a0c7..e0e50daf 100644
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -73,7 +73,7 @@ const LayoutBase = props => {
 
   return (
     <ThemeGlobalHexo.Provider value={{ searchModal }}>
-        <div id='theme-hexo'>
+        <div id='theme-hexo' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
             <Style/>
 
             {/* 顶部导航 */}
diff --git a/themes/landing/index.js b/themes/landing/index.js
index e6ccba66..c4fd203c 100644
--- a/themes/landing/index.js
+++ b/themes/landing/index.js
@@ -32,7 +32,7 @@ import { Pricing } from './components/Pricing'
 const LayoutBase = (props) => {
   const { children } = props
 
-  return <div id='theme-landing' className="overflow-hidden flex flex-col justify-between bg-white dark:bg-black">
+  return <div id='theme-landing' className={`${siteConfig('FONT_STYLE')} scroll-smooth overflow-hidden flex flex-col justify-between bg-white dark:bg-black`}>
 
         {/* 顶部导航栏 */}
         <Header />
diff --git a/themes/matery/components/MenuItemDrop.js b/themes/matery/components/MenuItemDrop.js
index 5e666fa4..d123cfe8 100644
--- a/themes/matery/components/MenuItemDrop.js
+++ b/themes/matery/components/MenuItemDrop.js
@@ -14,13 +14,13 @@ export const MenuItemDrop = ({ link }) => {
         {!hasSubMenu &&
             <Link
                 href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
+                className=" menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
                 {link?.icon && <i className={link?.icon} />} {link?.name}
                 {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
             </Link>}
 
         {hasSubMenu && <>
-            <div className='cursor-pointer font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+            <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
                 {link?.icon && <i className={link?.icon} />} {link?.name}
                 <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
             </div>
diff --git a/themes/matery/index.js b/themes/matery/index.js
index 51193157..76f3bdd5 100644
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -50,7 +50,7 @@ const LayoutBase = props => {
   const floatRightBottom = post ? <JumpToCommentButton /> : null
 
   return (
-        <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
+        <div id='theme-matery' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full scroll-smooth`}>
 
             <Style/>
 
diff --git a/themes/medium/index.js b/themes/medium/index.js
index 3b2e0b90..1dd51496 100644
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -59,7 +59,7 @@ const LayoutBase = props => {
             {/* CSS样式 */}
             <Style />
 
-            <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
+            <div id='theme-medium' className={`${siteConfig('FONT_STYLE')} bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
 
                 <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
                     {/* 桌面端左侧菜单 */}
diff --git a/themes/nav/components/BlogPostItem.js b/themes/nav/components/BlogPostItem.js
index 2b65253f..d53f43ed 100755
--- a/themes/nav/components/BlogPostItem.js
+++ b/themes/nav/components/BlogPostItem.js
@@ -12,7 +12,7 @@ const BlogPostItem = (props) => {
   const { group } = props
   if (group?.category) {
     return <>
-            <div id={group?.category} className='category  text-lg font-normal pt-9 pb-4 first:pt-4 select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key={group?.category}>
+            <div id={group?.category} className='category  text-lg font-normal pt-9 pb-4 first:pt-4 select-none flex justify-between  text-neutral-800 dark:text-neutral-400 p-2' key={group?.category}>
                 <h3><i className={`text-base mr-2 ${group?.icon ? group?.icon : 'fas fa-hashtag'}`} />{group?.category}</h3>
             </div>
             <div id='posts-wrapper' className='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5' >
@@ -23,7 +23,7 @@ const BlogPostItem = (props) => {
         </>
   } else {
     return <>
-            <div id='uncategory' className='category text-lg pt-9 pb-4 first:pt-4 font-bold select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key='uncategory'>
+            <div id='uncategory' className='category text-lg pt-9 pb-4 first:pt-4 font-bold select-none flex justify-between  text-neutral-800 dark:text-neutral-400 p-2' key='uncategory'>
                 <span><i className={`text-base mr-2 ${group?.icon ? group?.icon : 'fas fa-hashtag'}`} />未分类</span>
             </div>
             <div className='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
diff --git a/themes/nav/components/NavPostItem.js b/themes/nav/components/NavPostItem.js
index 32b22694..ec27ce90 100755
--- a/themes/nav/components/NavPostItem.js
+++ b/themes/nav/components/NavPostItem.js
@@ -23,7 +23,7 @@ const NavPostItem = (props) => {
     return <>
             <div
                 onClick={toggleOpenSubMenu}
-                className='select-none flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
+                className='select-none flex justify-between text-sm  cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
                 <span>{group?.category}</span>
                 <div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
             </div>
diff --git a/themes/nav/index.js b/themes/nav/index.js
index 1e263050..84663453 100755
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -75,7 +75,7 @@ const LayoutBase = (props) => {
             <Style/>
 
             {/* 主题样式根基 */}
-            <div id='theme-onenav' className='dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300'>
+            <div id='theme-onenav' className={`${siteConfig('FONT_STYLE')} dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
 
                 {/* 端顶部导航栏 */}
                 <TopNavBar {...props} />
@@ -84,7 +84,7 @@ const LayoutBase = (props) => {
                 <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' relative flex justify-between w-full h-screen mx-auto'}>
 
                     {/* 左侧推拉抽屉 */}
-                    <div className={'font-sans hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>
+                    <div className={' hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>
 
                         {/* 图标Logo */}
                         <div className='hidden md:block w-full top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
diff --git a/themes/next/components/ArticleLock.js b/themes/next/components/ArticleLock.js
index ff2db021..d4ca44a8 100644
--- a/themes/next/components/ArticleLock.js
+++ b/themes/next/components/ArticleLock.js
@@ -31,7 +31,7 @@ export const ArticleLock = props => {
 
   return (
     <div id='article-wrapper' className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200">
-      <div className="w-full flex justify-center items-center h-96 font-sans">
+      <div className="w-full flex justify-center items-center h-96 ">
         <div className="text-center space-y-3 dark:text-gray-300 text-black">
           <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
           <div className="flex mx-4">
diff --git a/themes/next/components/MenuList.js b/themes/next/components/MenuList.js
index 67250c54..a041da89 100644
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -38,7 +38,7 @@ export const MenuList = (props) => {
                 data-aos-delay="400"
                 data-aos-once="true"
                 data-aos-anchor-placement="top-bottom"
-                className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
+                className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 '>
                 {links.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
             </menu>
 
diff --git a/themes/next/components/NextRecentComments.js b/themes/next/components/NextRecentComments.js
index 70661948..74123935 100644
--- a/themes/next/components/NextRecentComments.js
+++ b/themes/next/components/NextRecentComments.js
@@ -26,7 +26,7 @@ const NextRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-500 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-500  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
         </div>)}
 
   </>
diff --git a/themes/next/components/Progress.js b/themes/next/components/Progress.js
index bc206206..8669e705 100644
--- a/themes/next/components/Progress.js
+++ b/themes/next/components/Progress.js
@@ -28,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [])
 
   return (
-    <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
+    <div className="h-4 w-full shadow-2xl bg-gray-400 ">
       <div
         className="h-4 bg-gray-600 duration-200"
         style={{ width: `${percent}%` }}
diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
index 9aed7c97..3d5c6443 100644
--- a/themes/next/components/SideAreaLeft.js
+++ b/themes/next/components/SideAreaLeft.js
@@ -30,10 +30,10 @@ const SideAreaLeft = props => {
             {/* 菜单 */}
             <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
                 <Logo className='h-32' {...props} />
-                <div className='pt-2 px-2 font-sans'>
+                <div className='pt-2 px-2 '>
                     <MenuList allowCollapse={true} {...props} />
                 </div>
-                {siteConfig('NEXT_MENU_SEARCH', null, CONFIG) && <div className='px-2 pt-2 font-sans'>
+                {siteConfig('NEXT_MENU_SEARCH', null, CONFIG) && <div className='px-2 pt-2 '>
                     <SearchInput {...props} />
                 </div>}
 
diff --git a/themes/next/components/Toc.js b/themes/next/components/Toc.js
index 077c9863..b5ca01af 100644
--- a/themes/next/components/Toc.js
+++ b/themes/next/components/Toc.js
@@ -63,7 +63,7 @@ const Toc = ({ toc }) => {
       <Progress />
     </div>
     <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full font-sans text-black dark:text-gray-300'>
+      <nav className='h-full  text-black dark:text-gray-300'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
           tocIds.push(id)
diff --git a/themes/next/index.js b/themes/next/index.js
index 26aada54..5808f208 100644
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -85,7 +85,7 @@ const LayoutBase = (props) => {
 
   return (
     <ThemeGlobalNext.Provider value={{ searchModal }}>
-        <div id='theme-next'>
+        <div id='theme-next' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
             <Style/>
 
             {/* 移动端顶部导航栏 */}
@@ -119,7 +119,7 @@ const LayoutBase = (props) => {
             </div>}
 
             {/* 右下角悬浮 */}
-            <div ref={floatButtonGroup} className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
+            <div ref={floatButtonGroup} className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 '>
                 <div className={(showRightFloat ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
                     <JumpToTopButton percent={percent} />
                     <JumpToBottomButton />
diff --git a/themes/nobelium/components/ArticleLock.js b/themes/nobelium/components/ArticleLock.js
index 8bf57e52..3a5f4b4c 100644
--- a/themes/nobelium/components/ArticleLock.js
+++ b/themes/nobelium/components/ArticleLock.js
@@ -29,7 +29,7 @@ export const ArticleLock = props => {
     passwordInputRef.current.focus()
   }, [])
 
-  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
+  return <div id='container' className='w-full flex justify-center items-center h-96 '>
         <div className='text-center space-y-3'>
             <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
             <div className='flex'>
diff --git a/themes/nobelium/components/ExampleRecentComments.js b/themes/nobelium/components/ExampleRecentComments.js
index e5097740..9dbdfa7f 100644
--- a/themes/nobelium/components/ExampleRecentComments.js
+++ b/themes/nobelium/components/ExampleRecentComments.js
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
         </div>)}
 
   </>
diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js
index 64e0a905..a7b87810 100644
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -46,7 +46,7 @@ const LayoutBase = props => {
 
   return (
         <ThemeGlobalNobelium.Provider value={{ searchModal, filterKey, setFilterKey }}>
-            <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen flex flex-col'>
+            <div id='theme-nobelium' className={`${siteConfig('FONT_STYLE')} nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen flex flex-col scroll-smooth`}>
 
                 <Style />
 
diff --git a/themes/plog/components/ArticleLock.js b/themes/plog/components/ArticleLock.js
index 8bf57e52..3a5f4b4c 100644
--- a/themes/plog/components/ArticleLock.js
+++ b/themes/plog/components/ArticleLock.js
@@ -29,7 +29,7 @@ export const ArticleLock = props => {
     passwordInputRef.current.focus()
   }, [])
 
-  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
+  return <div id='container' className='w-full flex justify-center items-center h-96 '>
         <div className='text-center space-y-3'>
             <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
             <div className='flex'>
diff --git a/themes/plog/components/ExampleRecentComments.js b/themes/plog/components/ExampleRecentComments.js
index 24135110..055a2e38 100644
--- a/themes/plog/components/ExampleRecentComments.js
+++ b/themes/plog/components/ExampleRecentComments.js
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
         </div>)}
 
   </>
diff --git a/themes/plog/index.js b/themes/plog/index.js
index 9b8b2d22..b916a30e 100644
--- a/themes/plog/index.js
+++ b/themes/plog/index.js
@@ -53,7 +53,7 @@ const LayoutBase = props => {
 
   return (
     <ThemeGlobalPlog.Provider value={{ showModal, setShowModal, modalContent, setModalContent }}>
-        <div id='theme-plog' className='plog relative dark:text-gray-300 w-full dark:bg-black min-h-screen'>
+        <div id='theme-plog' className={`${siteConfig('FONT_STYLE')} plog relative dark:text-gray-300 w-full dark:bg-black min-h-screen scroll-smooth`} >
 
             <Style/>
 
diff --git a/themes/simple/components/ArticleLock.js b/themes/simple/components/ArticleLock.js
index eb1d10ef..d9f6e978 100644
--- a/themes/simple/components/ArticleLock.js
+++ b/themes/simple/components/ArticleLock.js
@@ -28,7 +28,7 @@ export default function ArticleLock (props) {
     passwordInputRef.current.focus()
   }, [])
 
-  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
+  return <div id='container' className='w-full flex justify-center items-center h-96 '>
         <div className='text-center space-y-3'>
             <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
             <div className='flex mx-4'>
diff --git a/themes/simple/components/ExampleRecentComments.js b/themes/simple/components/ExampleRecentComments.js
index 7aad731b..93cde585 100644
--- a/themes/simple/components/ExampleRecentComments.js
+++ b/themes/simple/components/ExampleRecentComments.js
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
         </div>)}
 
   </>
diff --git a/themes/simple/components/MenuItemDrop.js b/themes/simple/components/MenuItemDrop.js
index b4be6381..31999bec 100644
--- a/themes/simple/components/MenuItemDrop.js
+++ b/themes/simple/components/MenuItemDrop.js
@@ -14,13 +14,13 @@ export const MenuItemDrop = ({ link }) => {
         {!hasSubMenu &&
             <Link
                 href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
+                className=" menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
                 {link?.icon && <span className='mr-2'><i className={link.icon} /></span>}{link?.name}
                     {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
             </Link>}
 
         {hasSubMenu && <>
-            <div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <div className='cursor-pointer  menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
                 {link?.icon && <span className='mr-2'><i className={link.icon} /></span>} {link?.name}
                 <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
             </div>
diff --git a/themes/simple/index.js b/themes/simple/index.js
index 8e57f3bb..ccc0ea95 100644
--- a/themes/simple/index.js
+++ b/themes/simple/index.js
@@ -47,7 +47,7 @@ const LayoutBase = props => {
 
   return (
     <ThemeGlobalSimple.Provider value={{ searchModal }}>
-        <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
+        <div id='theme-simple' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black scroll-smooth`}>
 
             <Style/>
 
