Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix invalid markdown lang #41926

Merged
merged 1 commit into from Oct 27, 2022
Merged

Fix invalid markdown lang #41926

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
45 changes: 27 additions & 18 deletions docs/basic-features/font-optimization.md
View file
Open in desktop
Expand Up @@ -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 (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
);
)
}
```

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 (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
);
)
}
```

Expand Down Expand Up @@ -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 (
<html lang="en" className={localFont.className}>
<body>{children}</body>
</html>
);
)
}
```

Expand Down