From e45473eb5a8347baa92c3737a8b8c4163abacc94 Mon Sep 17 00:00:00 2001
From: Niclas Jost <35239311+niclas-j@users.noreply.github.com>
Date: Wed, 8 Feb 2023 18:14:54 +0100
Subject: [PATCH] docs(www): add font install insdtructions

---
 apps/www/content/docs/installation.mdx | 43 ++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation.mdx
index d2608fe4333..6e3d43b9bb2 100644
--- a/apps/www/content/docs/installation.mdx
+++ b/apps/www/content/docs/installation.mdx
@@ -82,6 +82,49 @@ module.exports = {
 }
 ```
 
+### Fonts
+
+To add a font to your project you have to install [@nextjs/font](https://nextjs.org/docs/basic-features/font-optimization) and add the following to your `next.config.js`:
+
+```js
+const config = {
+  reactStrictMode: true,
+  experimental: {
+    fontLoaders: [
+      {
+        loader: "@next/font/google",
+        options: { subsets: ["latin"] },
+      },
+    ],
+  },
+}
+```
+
+Then declare the CSS variable in your `\_app.tsx`
+
+```ts
+import { Inter as FontSans } from "@next/font/google"
+
+const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+})
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <style jsx global>{`
+				:root {
+					--font-sans: ${fontSans.style.fontFamily};
+				}
+			}`}</style>
+      <Component {...pageProps} />
+    </>
+  )
+}
+```
+
 ### Icons
 
 I use icons from [Lucide](https://lucide.dev). You can use any icon library you want.