From 1b0f00ee1ecbfca4c7cbd78c274f4e19240959a2 Mon Sep 17 00:00:00 2001
From: KishiTheMechanic <s.kishi@elsoul.nl>
Date: Mon, 27 Nov 2023 17:45:48 +0100
Subject: [PATCH] new typography

---
 src/assets/styles/globals.css                 |  2 +-
 src/components/articles/Toc.tsx               |  4 +--
 src/components/articles/doc/DocContents.tsx   |  4 ++-
 src/components/articles/doc/DocIndex.tsx      |  8 +++---
 src/components/articles/doc/DocPagination.tsx |  4 +--
 .../articles/legal/LegalContents.tsx          |  4 ++-
 src/components/articles/news/NewsContents.tsx |  4 ++-
 src/components/articles/news/NewsIndex.tsx    |  6 ++--
 .../articles/news/NewsPageIndex.tsx           |  8 +++---
 src/components/articles/news/TopNewsRow.tsx   | 14 +++++-----
 src/components/pages/common/DiscordRow.tsx    | 10 +++----
 src/components/pages/home/HeroRow.tsx         | 15 ++++++++--
 src/layouts/common/CommonFooter.tsx           |  4 +--
 src/lib/rehypePlugin.ts                       | 28 +++++++++++++++++++
 src/pages/[locale]/doc/[...slug].tsx          |  2 ++
 src/pages/[locale]/legal/[...slug].tsx        |  2 ++
 src/pages/[locale]/news/[...slug].tsx         |  2 ++
 src/pages/_document.tsx                       |  2 +-
 tailwind.config.js                            |  2 +-
 19 files changed, 88 insertions(+), 37 deletions(-)
 create mode 100644 src/lib/rehypePlugin.ts

diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 2a4eecf..50d58b1 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -5,7 +5,7 @@
 @layer base {
   html {
     font-family:
-      Outfit,
+      Inter,
       'Noto Sans JP',
       ui-sans-serif,
       system-ui,
diff --git a/src/components/articles/Toc.tsx b/src/components/articles/Toc.tsx
index ea47096..e989e0e 100644
--- a/src/components/articles/Toc.tsx
+++ b/src/components/articles/Toc.tsx
@@ -16,7 +16,7 @@ export default function Toc({ toc, activeItemIds }: Props) {
       {toc.length > 0 && (
         <>
           <div className="p-4">
-            <p className="text-base font-semibold">{t('toc')}</p>
+            <p className="text-base font-semibold tracking-tight">{t('toc')}</p>
           </div>
           <div className="max-w-80 border-l p-4">
             <nav className="space-y-1" aria-label="Sidebar">
@@ -30,7 +30,7 @@ export default function Toc({ toc, activeItemIds }: Props) {
                       : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-900 dark:hover:text-gray-50',
                     `block px-3 py-2 text-sm font-medium ml-${
                       item.depth > 2 ? 3 : 0
-                    }`
+                    }`,
                   )}
                   aria-current={
                     activeItemIds.includes(item.id) ? 'location' : undefined
diff --git a/src/components/articles/doc/DocContents.tsx b/src/components/articles/doc/DocContents.tsx
index 120b51f..934c76c 100644
--- a/src/components/articles/doc/DocContents.tsx
+++ b/src/components/articles/doc/DocContents.tsx
@@ -14,7 +14,9 @@ export default function DocContents({ article, articleHtml }: Props) {
       <Container>
         <div className="flex justify-center py-12 lg:gap-12">
           <div>
-            <h1 className="text-4xl font-bold">{article.title}</h1>
+            <h1 className="text-4xl font-extrabold tracking-tighter">
+              {article.title}
+            </h1>
 
             <div className="py-8 xl:hidden">
               <ScrollSyncToc rawMarkdownBody={article.content} />
diff --git a/src/components/articles/doc/DocIndex.tsx b/src/components/articles/doc/DocIndex.tsx
index 78c2e19..6bc8313 100644
--- a/src/components/articles/doc/DocIndex.tsx
+++ b/src/components/articles/doc/DocIndex.tsx
@@ -35,7 +35,7 @@ export default function DocIndex() {
       <div className="py-24">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
+            <h2 className="text-4xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-5xl">
               {t('doc:title')}
             </h2>
             <p className="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
@@ -53,7 +53,7 @@ export default function DocIndex() {
                   actionIdx === 1 ? '' : '',
                   actionIdx === actions.length - 2 ? '' : '',
                   actionIdx === actions.length - 1 ? '' : '',
-                  'group relative bg-gray-50 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700'
+                  'group relative bg-gray-50 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700',
                 )}
               >
                 <div>
@@ -61,14 +61,14 @@ export default function DocIndex() {
                     className={clsx(
                       action.iconBackground,
                       action.iconForeground,
-                      'inline-flex p-3 ring-4 ring-white'
+                      'inline-flex p-3 ring-4 ring-white',
                     )}
                   >
                     <action.icon className="h-6 w-6" aria-hidden="true" />
                   </span>
                 </div>
                 <div className="mt-8">
-                  <h3 className="text-lg font-medium">
+                  <h3 className="text-lg font-bold tracking-tight">
                     <Link href={action.href} className="focus:outline-none">
                       <span className="absolute inset-0" aria-hidden="true" />
                       {t(action.title)}
diff --git a/src/components/articles/doc/DocPagination.tsx b/src/components/articles/doc/DocPagination.tsx
index 44176a8..2d62178 100644
--- a/src/components/articles/doc/DocPagination.tsx
+++ b/src/components/articles/doc/DocPagination.tsx
@@ -26,7 +26,7 @@ export default function DocPagination() {
       })
       .flat()
     const currentPageNum = pages.findIndex(
-      (item) => asPathWithoutLang === item?.href
+      (item) => asPathWithoutLang === item?.href,
     )
 
     return {
@@ -71,7 +71,7 @@ export default function DocPagination() {
                         {t('doc:nextPage')}
                         <ArrowSmallRightIcon className="ml-2 h-3 w-3" />
                       </p>
-                      <h3 className="text mt-2 text-right font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
+                      <h3 className="text mt-2 text-right font-semibold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
                         <span className="absolute inset-0" />
                         {t(pageInfo.nextPage.name)}
                       </h3>
diff --git a/src/components/articles/legal/LegalContents.tsx b/src/components/articles/legal/LegalContents.tsx
index 0afcb71..5144942 100644
--- a/src/components/articles/legal/LegalContents.tsx
+++ b/src/components/articles/legal/LegalContents.tsx
@@ -13,7 +13,9 @@ export default function LegalContents({ article, articleHtml }: Props) {
       <Container>
         <div className="flex justify-center py-12 lg:gap-12">
           <div>
-            <h1 className="text-4xl font-bold">{article.title}</h1>
+            <h1 className="text-4xl font-extrabold tracking-tighter">
+              {article.title}
+            </h1>
             <div className="py-8 lg:hidden">
               <ScrollSyncToc rawMarkdownBody={article.content} />
             </div>
diff --git a/src/components/articles/news/NewsContents.tsx b/src/components/articles/news/NewsContents.tsx
index 292fb7e..cc2e245 100644
--- a/src/components/articles/news/NewsContents.tsx
+++ b/src/components/articles/news/NewsContents.tsx
@@ -14,7 +14,9 @@ export default function NewsContents({ article, articleHtml }: Props) {
       <Container>
         <div className="flex justify-center py-12 lg:grid lg:grid-cols-8 lg:gap-12">
           <div className="lg:col-span-5">
-            <h1 className="text-4xl font-bold">{article.title}</h1>
+            <h1 className="text-4xl font-extrabold tracking-tighter">
+              {article.title}
+            </h1>
             <p className="mt-1 text-gray-600 dark:text-gray-200">
               {article.date}
             </p>
diff --git a/src/components/articles/news/NewsIndex.tsx b/src/components/articles/news/NewsIndex.tsx
index 26be5bd..188e5f6 100644
--- a/src/components/articles/news/NewsIndex.tsx
+++ b/src/components/articles/news/NewsIndex.tsx
@@ -17,7 +17,7 @@ export default function NewsIndex({ articles, urls }: Props) {
       <div className="pb-24 sm:pb-32">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <TopNewsRow articles={articles.slice(0, 4)} urls={urls} />
-          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-y-20 gap-x-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
             {articles.slice(4).map((article, index) => (
               <article
                 key={`NewsIndex Article${article.title}`}
@@ -42,12 +42,12 @@ export default function NewsIndex({ articles, urls }: Props) {
                       >
                         {article.date}
                       </time>
-                      <span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
+                      <span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
                         {article.category}
                       </span>
                     </div>
                     <div className="relative">
-                      <h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
+                      <h3 className="mt-3 text-lg font-semibold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
                         <span className="absolute inset-0" />
                         {article.title}
                       </h3>
diff --git a/src/components/articles/news/NewsPageIndex.tsx b/src/components/articles/news/NewsPageIndex.tsx
index bd99863..99bae91 100644
--- a/src/components/articles/news/NewsPageIndex.tsx
+++ b/src/components/articles/news/NewsPageIndex.tsx
@@ -16,11 +16,11 @@ export default function NewsPageIndex({ articles, urls }: Props) {
       <div className="py-24 sm:py-32">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-5xl">
+            <h1 className="text-5xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-7xl">
               News
             </h1>
           </div>
-          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-y-20 gap-x-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
             {articles.map((article, index) => (
               <article
                 key={`NewsIndex Article${article.title}`}
@@ -45,12 +45,12 @@ export default function NewsPageIndex({ articles, urls }: Props) {
                       >
                         {article.date}
                       </time>
-                      <span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
+                      <span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
                         {article.category}
                       </span>
                     </div>
                     <div className="relative">
-                      <h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
+                      <h3 className="mt-3 text-lg font-semibold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
                         <a href={urls[index + 3]}>
                           <span className="absolute inset-0" />
                           {article.title}
diff --git a/src/components/articles/news/TopNewsRow.tsx b/src/components/articles/news/TopNewsRow.tsx
index b152861..17d96ee 100644
--- a/src/components/articles/news/TopNewsRow.tsx
+++ b/src/components/articles/news/TopNewsRow.tsx
@@ -13,14 +13,14 @@ export default function TopNewsRow({ articles, urls }: Props) {
 
   return (
     <>
-      <div className="pt-8 pb-24 sm:pt-12 sm:pb-48">
+      <div className="pb-24 pt-8 sm:pb-48 sm:pt-12">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-5xl">
+            <h2 className="text-5xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-7xl">
               News
             </h2>
           </div>
-          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-y-20 gap-x-8 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
             {articles.slice(0, 1).map((article, index) => (
               <article
                 key={`NewsIndex Article${article.title}`}
@@ -45,12 +45,12 @@ export default function TopNewsRow({ articles, urls }: Props) {
                       >
                         {article.date}
                       </time>
-                      <span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
+                      <span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
                         {article.category}
                       </span>
                     </div>
                     <div className="relative">
-                      <h2 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
+                      <h2 className="mt-3 text-lg font-semibold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
                         <a href={urls[index]}>
                           <span className="absolute inset-0" />
                           {article.title}
@@ -89,11 +89,11 @@ export default function TopNewsRow({ articles, urls }: Props) {
                             >
                               {article.date}
                             </time>
-                            <span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
+                            <span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
                               {article.category}
                             </span>
                           </div>
-                          <h2 className="mt-2 text-lg font-semibold text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
+                          <h2 className="mt-2 text-lg font-semibold tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
                             <span className="absolute inset-0" />
                             {article.title}
                           </h2>
diff --git a/src/components/pages/common/DiscordRow.tsx b/src/components/pages/common/DiscordRow.tsx
index 9c7610b..613dfdd 100644
--- a/src/components/pages/common/DiscordRow.tsx
+++ b/src/components/pages/common/DiscordRow.tsx
@@ -12,22 +12,22 @@ export default function DiscordRow() {
     <>
       <Container className="py-48">
         <div className="mx-auto max-w-lg bg-discord px-4 py-5 shadow">
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center justify-center">
             <FontAwesomeIcon
               icon={faDiscord}
               size="lg"
               aria-label="Discord icon"
               className="h-9 w-9 text-white"
             />
-            <h3 className="ml-3 text-2xl font-semibold leading-6 text-white">
+            <h3 className="ml-3 text-2xl font-bold leading-6 tracking-tight text-white">
               {t('DiscordRow.title')}
             </h3>
           </div>
-          <div className="ml-12 mt-2 sm:flex sm:items-end sm:justify-between">
-            <div className="max-w-xl text-sm text-gray-50">
+          <div className="ml-12 mt-6 sm:mt-3 sm:flex sm:items-end sm:justify-between">
+            <div className="mr-4 max-w-xl text-sm text-gray-50 sm:mr-0">
               <p>{t('DiscordRow.body')}</p>
             </div>
-            <div className="mt-5 text-right sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
+            <div className="mr-2 mt-4 text-right sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-end">
               <Button
                 color="white"
                 href={siteConfig.discordInvitationLink}
diff --git a/src/components/pages/home/HeroRow.tsx b/src/components/pages/home/HeroRow.tsx
index e438a34..7b574cc 100644
--- a/src/components/pages/home/HeroRow.tsx
+++ b/src/components/pages/home/HeroRow.tsx
@@ -11,6 +11,9 @@ import tailwindcssLogo from '@/assets/img/logo/projects/tailwindcss.svg'
 import typescriptLogo from '@/assets/img/logo/projects/TypeScriptHorizontal.svg'
 import Button from '@/components/common/atoms/Button'
 import clsx from 'clsx'
+import { ChatBubbleBottomCenterIcon } from '@heroicons/react/24/outline'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 
 export default function HomeHeroRow() {
   const { t } = useTranslation()
@@ -18,7 +21,7 @@ export default function HomeHeroRow() {
   return (
     <>
       <Container className="pb-40 pt-24 text-center lg:pb-64 lg:pt-40">
-        <h1 className="font-display mx-auto max-w-4xl text-5xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-7xl">
+        <h1 className="font-display mx-auto max-w-4xl text-6xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-8xl">
           WebApp Boilerplate
         </h1>
         <p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-gray-700 dark:text-gray-200">
@@ -26,6 +29,10 @@ export default function HomeHeroRow() {
         </p>
         <div className="mt-10 flex justify-center gap-x-6">
           <Button href="/auth/login" className="">
+            <ChatBubbleBottomCenterIcon
+              className="mr-2 inline-block h-5 w-5"
+              aria-hidden="true"
+            />
             {t('aiChat')}
           </Button>
           <Button
@@ -35,6 +42,10 @@ export default function HomeHeroRow() {
             target="_blank"
             rel="noreferrer"
           >
+            <FontAwesomeIcon
+              icon={faGithub}
+              className="mr-2 inline-block h-5 w-5"
+            />
             GitHub
           </Button>
         </div>
@@ -104,7 +115,7 @@ export default function HomeHeroRow() {
                             'hover:opacity-60 dark:grayscale',
                             project.name === 'React'
                               ? 'dark:invert-0'
-                              : 'dark:invert'
+                              : 'dark:invert',
                           )}
                           width={168}
                           height={48}
diff --git a/src/layouts/common/CommonFooter.tsx b/src/layouts/common/CommonFooter.tsx
index bbfd91d..3a50104 100644
--- a/src/layouts/common/CommonFooter.tsx
+++ b/src/layouts/common/CommonFooter.tsx
@@ -28,7 +28,7 @@ export default function CommonFooter() {
                     <Link
                       key={`${nav.name} CommonFooter.commonFooterNav`}
                       href={nav.href ?? ''}
-                      className="text-base font-medium text-gray-700 hover:text-gray-900 dark:text-gray-50 dark:hover:text-gray-200 sm:py-0"
+                      className="text-base font-medium text-gray-700 hover:text-gray-500 dark:text-gray-50 dark:hover:text-gray-200 sm:py-0"
                     >
                       {t(nav.name)}
                     </Link>
@@ -95,7 +95,7 @@ export default function CommonFooter() {
                   />
                 </a>
               </div>
-              <p className="mt-6 text-sm text-gray-500 sm:mt-0">
+              <p className="mt-6 text-sm font-medium tracking-tight text-gray-500 sm:mt-0">
                 &copy; {new Date().getFullYear()} {siteConfig.copyright} All
                 rights reserved.
               </p>
diff --git a/src/lib/rehypePlugin.ts b/src/lib/rehypePlugin.ts
new file mode 100644
index 0000000..9ae5951
--- /dev/null
+++ b/src/lib/rehypePlugin.ts
@@ -0,0 +1,28 @@
+import { visit } from 'unist-util-visit'
+import { Plugin } from 'unified'
+import { Node, Element } from 'hast'
+
+export const addClassToTitles: Plugin = () => {
+  return (tree: Node) => {
+    visit(tree, 'element', (node: Element) => {
+      if (
+        node.tagName === 'h1' ||
+        node.tagName === 'h2' ||
+        node.tagName === 'h3' ||
+        node.tagName === 'h4' ||
+        node.tagName === 'h5' ||
+        node.tagName === 'h6'
+      ) {
+        node.properties = node.properties || {}
+        const existingClasses = Array.isArray(node.properties.className)
+          ? node.properties.className
+          : []
+
+        node.properties.className = [
+          'font-extrabold tracking-tighter break-word',
+          ...existingClasses,
+        ]
+      }
+    })
+  }
+}
diff --git a/src/pages/[locale]/doc/[...slug].tsx b/src/pages/[locale]/doc/[...slug].tsx
index b2e52cc..be90f1b 100644
--- a/src/pages/[locale]/doc/[...slug].tsx
+++ b/src/pages/[locale]/doc/[...slug].tsx
@@ -20,6 +20,7 @@ import { getI18nProps } from '@/lib/getStatic'
 import DocContents from '@/components/articles/doc/DocContents'
 import youtubeTransformer from '@/lib/youtubeTransformer'
 import embedder from '@remark-embedder/core'
+import { addClassToTitles } from '@/lib/rehypePlugin'
 
 const articleDirName = 'doc'
 
@@ -75,6 +76,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
     })
     .use(rehypeCodeTitles)
     .use(rehypeHighlight)
+    .use(addClassToTitles)
     .use(rehypeStringify)
     .process(article.content as string)
 
diff --git a/src/pages/[locale]/legal/[...slug].tsx b/src/pages/[locale]/legal/[...slug].tsx
index 19c2e2e..01cadd9 100644
--- a/src/pages/[locale]/legal/[...slug].tsx
+++ b/src/pages/[locale]/legal/[...slug].tsx
@@ -18,6 +18,7 @@ import { getAllArticles, getArticleBySlug } from '@/utils/article'
 import DefaultLayout from '@/layouts/default/DefaultLayout'
 import { getI18nProps } from '@/lib/getStatic'
 import LegalContents from '@/components/articles/legal/LegalContents'
+import { addClassToTitles } from '@/lib/rehypePlugin'
 
 const articleDirName = 'legal'
 
@@ -70,6 +71,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
       rel: ['noopener noreferrer'],
     })
     .use(rehypeHighlight)
+    .use(addClassToTitles)
     .use(rehypeStringify)
     .process(article.content as string)
 
diff --git a/src/pages/[locale]/news/[...slug].tsx b/src/pages/[locale]/news/[...slug].tsx
index bf6df58..c307b12 100644
--- a/src/pages/[locale]/news/[...slug].tsx
+++ b/src/pages/[locale]/news/[...slug].tsx
@@ -22,6 +22,7 @@ import NewsContents from '@/components/articles/news/NewsContents'
 import NewsPageIndex from '@/components/articles/news/NewsPageIndex'
 import youtubeTransformer from '@/lib/youtubeTransformer'
 import embedder from '@remark-embedder/core'
+import { addClassToTitles } from '@/lib/rehypePlugin'
 
 const articleDirName = 'news'
 
@@ -82,6 +83,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
     })
     .use(rehypeCodeTitles)
     .use(rehypeHighlight)
+    .use(addClassToTitles)
     .use(rehypeStringify)
     .process(article.content as string)
 
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index bcd4f7e..6ec9fa9 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -14,7 +14,7 @@ export default class MyDocument extends Document {
             crossOrigin="anonymous"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap"
             rel="stylesheet"
           />
           <link
diff --git a/tailwind.config.js b/tailwind.config.js
index 1fdbda4..831a422 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,7 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        sans: ['Outfit', 'Noto Sans JP', ...fontFamily.sans],
+        sans: ['Inter', 'Noto Sans JP', ...fontFamily.sans],
       },
       colors: {
         discord: '#5865f2',