From 9e173bf170861ded3951fed23e3c02c92e606baa Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Wed, 26 Oct 2022 19:18:27 -0700 Subject: [PATCH] Fix invalid markdown lang (#41926) ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) --- docs/basic-features/font-optimization.md | 45 ++++++++++++++---------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index 80d9463fd977..d05d1e19e683 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -26,40 +26,46 @@ Automatically self-host any Google Font. Fonts are included in the deployment an Import the font you would like to use from `@next/font/google` as a function. We recommend using [**variable fonts**](https://fonts.google.com/variablefonts) for the best performance and flexibility. -```jsx:app/layout.tsx -import { Inter } from '@next/font/google'; +```jsx +// app/layout.tsx +import { Inter } from '@next/font/google' // If loading a variable font, you don't need to specify the font weight -const inter = Inter(); +const inter = Inter() -export default function RootLayout({ children }: { - children: React.ReactNode; +export default function RootLayout({ + children, +}: { + children: React.ReactNode, }) { return ( {children} - ); + ) } ``` If you can't use a variable font, you will **need to specify a weight**: -```jsx:app/layout.tsx -import { Roboto } from '@next/font/google'; +```jsx +// app/layout.tsx +import { Roboto } from '@next/font/google' const roboto = Roboto({ weight: '400', -}); +}) -export default function RootLayout({ children }: { - children: React.ReactNode; +export default function RootLayout({ + children, +}: { + children: React.ReactNode, }) { return ( {children} - ); + ) } ``` @@ -95,20 +101,23 @@ View the [Font API Reference](/docs/api-reference/next/font.md#nextfontgoogle) f Import `@next/font/local` and specify the `src` of your local font file. We recommend using [**variable fonts**](https://fonts.google.com/variablefonts) for the best performance and flexibility. -```jsx:app/layout.tsx -import localFont from '@next/font/local'; +```jsx +/// app/layout.tsx +import localFont from '@next/font/local' // Font files can be colocated inside of `app` -const myFont = localFont({ src: './my-font.woff2' }); +const myFont = localFont({ src: './my-font.woff2' }) -export default function RootLayout({ children }: { - children: React.ReactNode; +export default function RootLayout({ + children, +}: { + children: React.ReactNode, }) { return ( {children} - ); + ) } ```