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

Revert font-optimization.md syntax #42403

Merged
merged 3 commits into from Nov 3, 2022
Merged

Revert font-optimization.md syntax #42403

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba1a26d
Update font-optimization.md
chibicode Nov 3, 2022
77c0d62
Merge branch 'canary' into fix-font-optimization
ijjk Nov 3, 2022
370a614
lint fix
ijjk Nov 3, 2022
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
29 changes: 17 additions & 12 deletions docs/basic-features/font-optimization.md
View file
Open in desktop
Expand Up @@ -28,8 +28,9 @@ Import the font you would like to use from `@next/font/google` as a function. We

To use the font in all your pages, add it to [`_app.js` file](https://nextjs.org/docs/advanced-features/custom-app) under `/pages` as shown below:

```js:pages/_app.js
import { Inter } from '@next/font/google';
```js
// pages/_app.js
import { Inter } from '@next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter()
Expand All @@ -45,8 +46,9 @@ export default function MyApp({ Component, pageProps }) {

If you can't use a variable font, you will **need to specify a weight**:

```js:pages/_app.js
import { Roboto } from '@next/font/google';
```js
// pages/_app.js
import { Roboto } from '@next/font/google'

const roboto = Roboto({
weight: '400',
Expand All @@ -65,10 +67,11 @@ export default function MyApp({ Component, pageProps }) {

You can also use the font without a wrapper and `className` by injecting it inside the `<head>` as follows:

```js:pages/_app.js
import { Inter } from '@next/font/google';
```js
// pages/_app.js
import { Inter } from '@next/font/google'

const inter = Inter();
const inter = Inter()

export default function MyApp({ Component, pageProps }) {
return (
Expand Down Expand Up @@ -110,8 +113,9 @@ This can be done in 2 ways:

- On a font per font basis by adding it to the function call

```js:pages/_app.js
const inter = Inter({ subsets: ["latin"] });
```js
// pages/_app.js
const inter = Inter({ subsets: ['latin'] })
```

- Globally for all your fonts in your `next.config.js`
Expand All @@ -135,11 +139,12 @@ 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.

```js:pages/_app.js
import localFont from '@next/font/local';
```js
// pages/_app.js
import localFont from '@next/font/local'

// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' });
const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
return (
Expand Down