[fix] migrate localfont to hosted font

pages/404.tsx

@@ -14,13 +14,11 @@ export default function NotFoundPage() {
     <Page>
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-center text-2xl font-bold font-fang-zheng-xiao-biao-song`}>
-          {"404 NOT FOUND"}
-        </h2>
+        <h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>{"404 NOT FOUND"}</h2>
         <Separator />
         <div className="my-5 flex flex-col justify-center">
           <TfiFaceSad className="mx-auto my-4" size={"6em"} />
-          <p className={`font-source-serif-screen mx-auto my-3 text-center text-xl`}>
+          <p className={`content-font mx-auto my-3 text-center text-xl`}>
             {"This page does not exist for it might be removed or closed."}
           </p>
           <div className="my-5 flex justify-center">

pages/500.tsx

@@ -14,13 +14,11 @@ export default function ServerErrorPage() {
     <Page>
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-center text-2xl font-bold font-fang-zheng-xiao-biao-song`}>
-          {"INVALID OPERATION"}
-        </h2>
+        <h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>{"INVALID OPERATION"}</h2>
         <Separator />
         <div className="my-5 flex flex-col justify-center">
           <MdOutlineDangerous className="mx-auto my-4" size={"6em"} />
-          <p className={`font-source-serif-screen mx-auto my-3 text-center text-xl`}>
+          <p className={`content-font mx-auto my-3 text-center text-xl`}>
             {"Something went wrong. Please try again later."}
           </p>
           <div className="my-5 flex justify-center">

pages/about.tsx

@@ -18,9 +18,9 @@ export default function AboutPage() {
       />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-around text-2xl font-bold font-fang-zheng-xiao-biao-song`}>{"ABOUT ME"}</h2>
+        <h2 className={`my-5 flex justify-around text-2xl font-bold caption-font`}>{"ABOUT ME"}</h2>
         <Separator />
-        <div className={`font-source-serif-screen my-5 justify-center md:flex md:space-x-10`}>
+        <div className={`content-font my-5 justify-center md:flex md:space-x-10`}>
           <div className="my-auto flex md:w-1/3">
             <img alt="my-profile" className="mx-auto my-auto max-h-[23rem] rounded-lg" src="/images/profile.webp" />
           </div>

pages/blog/[id].tsx

@@ -78,20 +78,18 @@ const ReaderPage = (props: ReaderPageProps) => {
               {props.frontMatter.coverURL && <PostCover coverURL={props.frontMatter.coverURL} />}
               <div className="pb-1 border-b-2 border-black dark:border-gray-300">
                 <div
-                  className={`font-fang-zheng-xiao-biao-song my-2 text-black dark:text-white flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
+                  className={`caption-font my-2 text-black dark:text-white flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
                 >
                   {props.frontMatter?.title}
                 </div>
                 {props.frontMatter?.subtitle && (
-                  <div
-                    className={`font-fang-zheng-xiao-biao-song my-1 flex justify-center text-xl font-bold capitalize`}
-                  >
+                  <div className={`caption-font my-1 flex justify-center text-xl font-bold capitalize`}>
                     {props.frontMatter.subtitle}
                   </div>
                 )}
                 <div className="my-1 flex justify-center text-sm italic">{normalizeDate(props.frontMatter?.time)}</div>
                 {props.frontMatter?.summary && (
-                  <p className={"font-source-serif-screen my-4 indent-8 text-gray-800 dark:text-gray-300"}>
+                  <p className={"content-font my-4 indent-8 text-gray-800 dark:text-gray-300"}>
                     {props.frontMatter?.summary}
                   </p>
                 )}
@@ -110,7 +108,7 @@ const ReaderPage = (props: ReaderPageProps) => {
                 )}
               </div>
               <div
-                className={`text-wrap border-gray-500 font-source-serif-screen ${
+                className={`text-wrap border-gray-500 content-font ${
                   !props.frontMatter.allowShare ? "select-none" : ""
                 }`}
                 {...handleRightSwipe}

pages/friends.tsx

@@ -14,9 +14,9 @@ export default function FriendsPage() {
       <SEO description={"My Friend Links"} title={`${Config.SiteTitle} - Friends`} />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-center text-2xl font-bold font-fang-zheng-xiao-biao-song`}>{"FRIENDS"}</h2>
+        <h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>{"FRIENDS"}</h2>
         <Separator />
-        <div className={`my-5 flex flex-wrap justify-center text-2xl font-source-serif-screen`}>
+        <div className={`my-5 flex flex-wrap justify-center text-2xl content-font`}>
           {FriendsList.map((item) => (
             <Link className="mx-2 p-2 underline" href={item.url} key={nanoid()}>
               {item.title}

pages/index.tsx

@@ -35,7 +35,7 @@ export default function Home(props: HomePageProps) {
         {props.pinnedPostList.length !== 0 && (
           <div>
             <Separator />
-            <h2 className={`my-5 flex justify-center text-2xl font-bold font-fang-zheng-xiao-biao-song`}>
+            <h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>
               <RiStarFill className="mx-2 my-auto" />
               {"PINNED POSTS"}
             </h2>
@@ -46,7 +46,7 @@ export default function Home(props: HomePageProps) {
         {props.latestPostList.length !== 0 && (
           <div>
             <Separator />
-            <h2 className={`my-5 flex justify-center text-2xl font-bold font-fang-zheng-xiao-biao-song`}>
+            <h2 className={`my-5 flex justify-center text-2xl font-bold caption-font`}>
               <LuPenTool className="mx-2 my-auto" />
               {"LATEST POSTS"}
             </h2>

pages/posts/[[...slug]].tsx

@@ -55,7 +55,7 @@ export default function PostsPage(props: PostsPageProps) {
       />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-center text-2xl font-fang-zheng-xiao-biao-song font-bold`}>
+        <h2 className={`my-5 flex justify-center text-2xl caption-font font-bold`}>
           <LuPenTool className="mx-2 my-auto" />
           {"ALL POSTS"}
         </h2>

pages/sponsor.tsx

@@ -22,7 +22,7 @@ export default function SponsorPage() {
       <ContentContainer>
         <div className="md:flex mt-10">
           <div className="flex flex-col justify-center md:w-1/2">
-            <h2 className={`my-5 flex justify-center text-2xl font-bold text-red-500 font-fang-zheng-xiao-biao-song`}>
+            <h2 className={`my-5 flex justify-center text-2xl font-bold text-red-500 caption-font`}>
               <GoHeartFill className="mx-2 my-auto" />
               {"SPONSOR"}
             </h2>

pages/tags/[...slug].tsx

@@ -52,7 +52,7 @@ export default function TagsContentPage(props: TagsContentPageProps) {
       />
       <NavBar />
       <ContentContainer>
-        <h2 className={"my-5 flex flex-col justify-center text-center font-bold font-fang-zheng-xiao-biao-song"}>
+        <h2 className={"my-5 flex flex-col justify-center text-center font-bold caption-font"}>
           <div className="mx-auto text-2xl">{`Posts of ${props.tagName}`}</div>
         </h2>
         <Separator />