From ba1a26dbdd4532f0e755b04e8246a252593312d7 Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Thu, 3 Nov 2022 03:28:36 -0700 Subject: [PATCH 1/2] Update font-optimization.md --- docs/basic-features/font-optimization.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index 3d78e78295ad..e1c74ced104d 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -28,7 +28,8 @@ 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 +```js +// pages/_app.js import { Inter } from '@next/font/google'; // If loading a variable font, you don't need to specify the font weight @@ -45,7 +46,8 @@ 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 +```js +// pages/_app.js import { Roboto } from '@next/font/google'; const roboto = Roboto({ @@ -65,7 +67,8 @@ export default function MyApp({ Component, pageProps }) { You can also use the font without a wrapper and `className` by injecting it inside the `` as follows: -```js:pages/_app.js +```js +// pages/_app.js import { Inter } from '@next/font/google'; const inter = Inter(); @@ -110,7 +113,8 @@ This can be done in 2 ways: - On a font per font basis by adding it to the function call - ```js:pages/_app.js + ```js + // pages/_app.js const inter = Inter({ subsets: ["latin"] }); ``` @@ -135,7 +139,8 @@ 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 +```js +// pages/_app.js import localFont from '@next/font/local'; // Font files can be colocated inside of `pages` From 370a614bb4915759534b14a2daae3bd3c3f6b6cf Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 3 Nov 2022 11:14:00 -0700 Subject: [PATCH 2/2] lint fix --- docs/basic-features/font-optimization.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index e1c74ced104d..ac5119f92372 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -30,7 +30,7 @@ To use the font in all your pages, add it to [`_app.js` file](https://nextjs.org ```js // pages/_app.js -import { Inter } from '@next/font/google'; +import { Inter } from '@next/font/google' // If loading a variable font, you don't need to specify the font weight const inter = Inter() @@ -48,7 +48,7 @@ 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'; +import { Roboto } from '@next/font/google' const roboto = Roboto({ weight: '400', @@ -69,9 +69,9 @@ You can also use the font without a wrapper and `className` by injecting it insi ```js // pages/_app.js -import { Inter } from '@next/font/google'; +import { Inter } from '@next/font/google' -const inter = Inter(); +const inter = Inter() export default function MyApp({ Component, pageProps }) { return ( @@ -115,7 +115,7 @@ This can be done in 2 ways: ```js // pages/_app.js - const inter = Inter({ subsets: ["latin"] }); + const inter = Inter({ subsets: ['latin'] }) ``` - Globally for all your fonts in your `next.config.js` @@ -141,10 +141,10 @@ Import `@next/font/local` and specify the `src` of your local font file. We reco ```js // pages/_app.js -import localFont from '@next/font/local'; +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 (