wip: fiddled with fonts

app/fonts.ts

@@ -3,21 +3,21 @@ import { Raleway, Syne, Questrial, Nunito_Sans } from "next/font/google";
 export const raleway = Raleway({
     subsets: ['latin'],
     display: "swap",
-})
+});
 
 export const syne = Syne({
     subsets: ['latin'],
     display: "swap",
-})
+});
 
 export const questrial = Questrial({
     subsets: ['latin'],
     display: "swap",
     weight: ['400'],
-})
+});
 
 export const nunito_sans = Nunito_Sans({
     subsets: ['latin'],
     display: "swap",
-    }
+    weight: ['400'],
-)
+});

app/mark/page.tsx

@@ -7,6 +7,7 @@ import rehypeHighlight from 'rehype-highlight';
 import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
 import { MarkPostString } from '@/components/dummyPost';
+import {raleway} from "@/app/fonts";
 
 export default async function Mark() {
     let content = await MarkPostString();
@@ -19,7 +20,13 @@ export default async function Mark() {
         .use(rehypeReact, {
             Fragment: Fragment,
             jsx: jsx,
-            jsxs: jsxs
+            jsxs: jsxs,
+            components: {
+                h1: props => <h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>{props.children}</h1>,
+                h2: props => <h2 className={`${raleway.className} mx-auto w-224 text-3xl`}>{props.children}</h2>,
+                h3: props => <h3 className={`${raleway.className} mx-auto w-224 text-2xl`}>{props.children}</h3>,
+                h4: props => <h4 className={`${raleway.className} mx-auto w-224 text-xl`}>{props.children}</h4>
+            }
         } as RehypeReactOptions)
         .process(content);