Fix font-optimization.md syntax errors (#42403)

Fixes syntax errors introduced in #42266 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
vercel · Nov 3, 2022 · 6edeb9d · 6edeb9d
1 parent 539769d
commit 6edeb9d
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
@@ -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()
@@ -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',
@@ -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 (
@@ -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`
@@ -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 (