--- title: Customize description: This guide provides instructions on customizing our application. date: 29-11-2024 --- ## Markdown Options To customize Markdown parsing, navigate to `@lib/markdown.ts` and locate the `parseMdx` function. You can add your desired plugins in the `mdxOptions`. Here’s an example: ```ts:lib/markdown.ts async function parseMdx(rawMdx: string) { return await compileMDX({ source: rawMdx, options: { parseFrontmatter: true, mdxOptions: { // Add your plugins here rehypePlugins: [Shiki], remarkPlugins: [remarkGfm], }, }, components, }); } ``` ## Fonts Currently, this project uses the `Geist` font. If you want to use other fonts, you can change the configuration in the main layout as shown below: ### Google Fonts To use a Google font, import your desired font from `next/font/google`, initialize it with options, and apply the variable to the `body`: ```tsx:app/layout.tsx import { Space_Grotesk } from "next/font/google"; const fontSans = Space_Grotesk({ display: "swap", variable: "--font-regular", weight: "400", subsets: ["latin"], }); export default function RootLayout({ children }) { return ( {children} ); } ``` ### Local Fonts To use a local font, you need to use the local font loader from Next.js. Pass the options and apply them to the `body`: ```tsx:app/layout.tsx import localFont from "next/font/local"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", variable: "--font-regular", weight: "100 900", }); export default function RootLayout({ children }) { return ( {children} ); } ``` For both options, ensure that you add the variable to `tailwind.config.ts`: ```ts:tailwind.config.ts { // ... extend: { fontFamily: { regular: ["var(--font-regular)"], }, } } ``` For theme and colors, refer to the [Theme section](/docs/getting-started/themes)