feat(frontend/blog) font, lighthouse improve

app/blog/BlogPostCard.tsx

@@ -29,14 +29,12 @@ function BlogPostCard({ post }: Props) {
             >
                 { pic_url !== '' && <div className={ `w-full overflow-visible` }>
                     <Image
-                        // as={NextImage}
                         isZoomed
                         isBlurred
                         alt={ 'cover picture' }
                         src={ pic_url }
                         className={ `h-80 w-full object-cover` }
                         width={ `100%` }
-                        // removeWrapper
                     ></Image>
                 </div> }
 
@@ -44,7 +42,7 @@ function BlogPostCard({ post }: Props) {
                     <div className={ `flex flex-row justify-between` }>
                         <div className={ `mx-2 mt-2` }>
                             <Chip className={ `mb-2` } radius={ `sm` } color={ `secondary` }
-                                  variant={ `flat` }>{ category }</Chip>
+                                  variant={ `solid` }>{ category }</Chip>
                             <p className={ `text-4xl font-bold` }> { title }</p>
                             <p className={ `text-xl` }> { sub_title }</p>
                         </div>

app/globals.css

@@ -1,3 +1,13 @@
+@import "lxgw-wenkai-webfont";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    font-family: "LXGW WenKai", sans-serif;
+}
+
+pre, code {
+    font-family: "LXGW WenKai Mono", sans-serif;
+}

app/layout.tsx

@@ -1,11 +1,9 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import './globals.css';
 import React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import Navbar from '@/components/Navbar';
 
-const inter = Inter({ subsets: [ 'latin' ] });
 
 export const metadata: Metadata = {
     title: 'Lumither\'s site',
@@ -19,7 +17,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-        <body className={ inter.className }>
+        <body>
         <NextThemesProvider attribute="class" defaultTheme="dark">
             <Navbar />
             { children }

package.json

@@ -12,6 +12,7 @@
     "@nextui-org/react": "^2.3.5",
     "axios": "^1.6.8",
     "framer-motion": "^11.1.7",
+    "lxgw-wenkai-webfont": "^1.7.0",
     "next": "14.2.2",
     "next-themes": "^0.3.0",
     "react": "^18",