From c50dffcc6d73ed34b2ebfba548f483523963d293 Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Mon, 12 Aug 2024 13:39:19 +0800
Subject: [PATCH] [fix] migrate localfont to hosted font

---
 .../fang-zheng-xiao-biao-song/index.css       |  2 +-
 assets/font-css/source-serif-screen/index.css |  2 +-
 components/homepage/HomeCover.tsx             |  4 +--
 components/mdx/H2.tsx                         |  2 +-
 components/readerpage/BottomCard.tsx          |  2 +-
 .../sponsor-page/SponsorDescription.tsx       |  4 +--
 components/utils/NavBar.tsx                   |  2 +-
 components/utils/PostList.tsx                 |  4 +--
 pages/404.tsx                                 |  6 ++--
 pages/500.tsx                                 |  6 ++--
 pages/about.tsx                               |  4 +--
 pages/blog/[id].tsx                           | 10 +++---
 pages/friends.tsx                             |  4 +--
 pages/index.tsx                               |  4 +--
 pages/posts/[[...slug]].tsx                   |  2 +-
 pages/sponsor.tsx                             |  2 +-
 pages/tags/[...slug].tsx                      |  2 +-
 styles/font.css                               | 31 +++++++++++++++++--
 tailwind.config.js                            |  2 +-
 19 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/assets/font-css/fang-zheng-xiao-biao-song/index.css b/assets/font-css/fang-zheng-xiao-biao-song/index.css
index 3db9e06..4557598 100644
--- a/assets/font-css/fang-zheng-xiao-biao-song/index.css
+++ b/assets/font-css/fang-zheng-xiao-biao-song/index.css
@@ -3741,6 +3741,6 @@
     U+8061, U+806f-8070, U+8072-8073, U+8075-8077, U+807d-807e;
 }
 
-.font-fang-zheng-xiao-biao-song {
+.caption-font {
   font-family: "fang-zheng-xiao-biao-song", "Noto Serif KR Black";
 }
diff --git a/assets/font-css/source-serif-screen/index.css b/assets/font-css/source-serif-screen/index.css
index 6684d63..cb29461 100644
--- a/assets/font-css/source-serif-screen/index.css
+++ b/assets/font-css/source-serif-screen/index.css
@@ -4197,6 +4197,6 @@
     U+93cb-93cc, U+93d1;
 }
 
-.font-source-serif-screen {
+.content-font {
   font-family: "source-serif-screen", "source-serif-screen-kr";
 }
diff --git a/components/homepage/HomeCover.tsx b/components/homepage/HomeCover.tsx
index af48ecb..984dbf4 100644
--- a/components/homepage/HomeCover.tsx
+++ b/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">
diff --git a/components/mdx/H2.tsx b/components/mdx/H2.tsx
index a9c72ce..cb1ecb4 100644
--- a/components/mdx/H2.tsx
+++ b/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>
   );
diff --git a/components/readerpage/BottomCard.tsx b/components/readerpage/BottomCard.tsx
index 51452a2..370dccc 100644
--- a/components/readerpage/BottomCard.tsx
+++ b/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>
   );
 };
diff --git a/components/sponsor-page/SponsorDescription.tsx b/components/sponsor-page/SponsorDescription.tsx
index fa96986..62091c1 100644
--- a/components/sponsor-page/SponsorDescription.tsx
+++ b/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."
           }
diff --git a/components/utils/NavBar.tsx b/components/utils/NavBar.tsx
index e22333d..071f63e 100644
--- a/components/utils/NavBar.tsx
+++ b/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>
diff --git a/components/utils/PostList.tsx b/components/utils/PostList.tsx
index c5a7823..f16c32c 100644
--- a/components/utils/PostList.tsx
+++ b/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>
             )}
diff --git a/pages/404.tsx b/pages/404.tsx
index 66c8789..ff91950 100644
--- a/pages/404.tsx
+++ b/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">
diff --git a/pages/500.tsx b/pages/500.tsx
index a3dbbe6..0e30cdc 100644
--- a/pages/500.tsx
+++ b/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">
diff --git a/pages/about.tsx b/pages/about.tsx
index f9de381..a79604b 100644
--- a/pages/about.tsx
+++ b/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>
diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
index a9c3ce8..0ac2692 100644
--- a/pages/blog/[id].tsx
+++ b/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}
diff --git a/pages/friends.tsx b/pages/friends.tsx
index 4907e54..56a3554 100644
--- a/pages/friends.tsx
+++ b/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}
diff --git a/pages/index.tsx b/pages/index.tsx
index 749952e..6d243f7 100644
--- a/pages/index.tsx
+++ b/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>
diff --git a/pages/posts/[[...slug]].tsx b/pages/posts/[[...slug]].tsx
index b45f4e2..b37f064 100644
--- a/pages/posts/[[...slug]].tsx
+++ b/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>
diff --git a/pages/sponsor.tsx b/pages/sponsor.tsx
index 3c7bf96..6895623 100644
--- a/pages/sponsor.tsx
+++ b/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>
diff --git a/pages/tags/[...slug].tsx b/pages/tags/[...slug].tsx
index 8e6cfb6..82a3e2f 100644
--- a/pages/tags/[...slug].tsx
+++ b/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 />
diff --git a/styles/font.css b/styles/font.css
index 12c54eb..bbb33c6 100644
--- a/styles/font.css
+++ b/styles/font.css
@@ -1,2 +1,29 @@
-@import "../assets/font-css/fang-zheng-xiao-biao-song/index.css";
-@import "../assets/font-css/source-serif-screen/index.css";
+@import url("https://font-host.dreams.plus/fonts/fang-zheng-xiao-biao-song/index.css");
+@import url("https://font-host.dreams.plus/fonts/source-serif-4/index.css");
+@import url("https://font-host.dreams.plus/fonts/noto-serif-kr/index.css");
+@import url("https://font-host.dreams.plus/fonts/fang-zheng-serif-screen/index.css");
+@import url("https://font-host.dreams.plus/fonts/source-serif-screen/index.css");
+
+.prose b {
+  font-weight: 600;
+}
+
+.prose strong {
+  font-weight: 600;
+}
+
+.caption-font {
+  font-family: "Source Serif 4", "FZXiaoBiaoSong-B05", "Noto Serif KR";
+}
+
+.content-font {
+  font-family: "Source Serif 4", "FZPingXianYaSong-R-GBK", "Noto Serif KR";
+}
+
+.website-title-font {
+  font-family: "FZXiaoBiaoSong-B05";
+}
+
+.post-list-caption-font {
+  font-family: "Clear Han Serif", "Noto Serif KR";
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index a7d8f33..d82de32 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,7 +35,7 @@ module.exports = {
       },
       fontFamily: {
         fangzhengxiaobiaosong: "--font-fangzhengxiaobiaosong",
-        sourceSerifScreenCN: "--font-source-serif-screen-cn",
+        sourceSerifScreenCN: "--content-font-cn",
       },
       colors: {
         border: "hsl(var(--border))",