[fix] migrate localfont to hosted font

components/homepage/HomeCover.tsx

@@ -20,10 +20,10 @@ export const HomeCover = () => {
           />
         </div>
       </div>
-      <div className={`font-fang-zheng-xiao-biao-song my-8 text-center text-4xl font-bold`}>{Config.Nickname}</div>
+      <div className={`caption-font my-8 text-center text-4xl font-bold`}>{Config.Nickname}</div>
       {Config.Sentence && (
         <div className="my-5 flex justify-center">
-          <p className={`font-source-serif-screen text-lg`}>{Config.Sentence}</p>
+          <p className={`content-font text-lg`}>{Config.Sentence}</p>
         </div>
       )}
       <div className="my-8">

components/mdx/H2.tsx

@@ -1,6 +1,6 @@
 const H2 = (props: JSX.IntrinsicElements["h2"]) => {
   return (
-    <h2 className={`font-fang-zheng-xiao-biao-song scroll-mt-20`} id={props.id}>
+    <h2 className={`caption-font scroll-mt-20`} id={props.id}>
       {props.children}
     </h2>
   );

components/readerpage/BottomCard.tsx

@@ -4,7 +4,7 @@ export const BottomCard = () => {
   return (
     <div className="p-8 w-full flex flex-col justify-center">
       <img alt={Config.AuthorName} className="h-24 w-24 rounded-full mx-auto" src={Config.AvatarURL} />
-      <p className="mx-auto mt-5 font-source-serif-screen">{Config.Sentence}</p>
+      <p className="mx-auto mt-5 content-font">{Config.Sentence}</p>
     </div>
   );
 };

components/sponsor-page/SponsorDescription.tsx

@@ -4,11 +4,11 @@ export const SponsorDescription = () => {
   return (
     <div className="h-full">
       {!Config.Sponsor ? (
-        <p className={`font-source-serif-screen break-words text-lg`}>
+        <p className={`content-font break-words text-lg`}>
           {"Thank you, for data and personal private security, every sponsor method was paused."}
         </p>
       ) : (
-        <p className={`font-source-serif-screen break-words text-lg`}>
+        <p className={`content-font break-words text-lg`}>
           {
             "If you like my works, I would deeply appreciate your support as a patron. Your contribution not only fuels my creative journey but also allows me to delve deeper into my passion. Your support plays a vital role in making this vision a reality. Thank you for considering becoming a patron and being an integral part of this work endeavor."
           }

components/utils/NavBar.tsx

@@ -34,7 +34,7 @@ export const NavBar = () => {
     <Sheet onOpenChange={(open) => setIsSideNavOpen(open)} open={isSideNavOpen}>
       <div className="sticky top-0 z-50 border-black-200 dark:border-gray-700 border-b bg-white dark:bg-gray-950 flex flex-wrap justify-between py-3 px-5 md:px-10 lg:px-20 xl:px-32 2xl:px-52">
         <Link className="cursor-pointer my-auto text-2xl font-bold" href="/">
-          <h1 className={`font-fang-zheng-xiao-biao-song my-auto`} title="Click to jump to home page.">
+          <h1 className={`website-title-font my-auto`} title="Click to jump to home page.">
             {Config.SiteTitle}
           </h1>
         </Link>

components/utils/PostList.tsx

@@ -14,7 +14,7 @@ export const PostList = (props: { data: TPostListItem[] }) => {
               index !== props.data.length - 1 && "border-b"
             } border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 dark:border-gray-800 px-3 py-1`}
           >
-            <div className={"font-source-serif-screen flex-col py-3"}>
+            <div className={"post-list-caption-font flex-col py-3"}>
               <div className="flex justify-center">
                 <h3 className="mx-auto text-lg font-extrabold capitalize">{postItem.frontMatter.title}</h3>
               </div>
@@ -27,7 +27,7 @@ export const PostList = (props: { data: TPostListItem[] }) => {
               </div>
             </div>
             {postItem.frontMatter.summary && (
-              <div className={"font-source-serif-screen flex justify-center"}>
+              <div className={"content-font flex justify-center"}>
                 <p>{postItem.frontMatter.summary}</p>
               </div>
             )}