From d5880f8cf09401bc1d256f0e8d8f1132e77ab8bc Mon Sep 17 00:00:00 2001 From: shadcn Date: Sun, 15 Oct 2023 15:21:11 +0400 Subject: [PATCH] docs(www): add fonts docs --- apps/www/content/docs/installation/next.mdx | 53 +++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx index 8cda7fde6fa..505fadfbebe 100644 --- a/apps/www/content/docs/installation/next.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -37,6 +37,59 @@ Configure the import alias for utils: › @/lib/utils Are you using React Server Components? › no / yes ``` +### Fonts + +I use [Inter](https://rsms.me/inter/) as the default font. Inter is not required. You can replace it with any other font. + +Here's how I configure Inter for Next.js: + +**1. Import the font in the root layout:** + +```js showLineNumbers title=app/layout.tsx {2,4-7,15-16} +import "@/styles/globals.css" +import { Inter as FontSans } from "next/font/google" + +export const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", +}) + +export default function RootLayout({ children }: RootLayoutProps) { + return ( + + + + ... + + + ) +} +``` + +**2. Configure `theme.extend.fontFamily` in `tailwind.config.js`** + +```js showLineNumbers title=tailwind.config.js {9-11} +const { fontFamily } = require("tailwindcss/defaultTheme") + +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: ["class"], + content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], + theme: { + extend: { + fontFamily: { + sans: ["var(--font-sans)", ...fontFamily.sans], + }, + }, + }, +} +``` + ### App structure Here's how I structure my Next.js apps. You can use this as a reference: