From 468f2c48b1da674a7842498905ba2372298241fb Mon Sep 17 00:00:00 2001 From: Ismael Date: Wed, 2 Nov 2022 08:25:45 -0600 Subject: [PATCH] update font optimization page (#42266) Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Co-authored-by: Tim Neutkens --- docs/api-reference/next/font.md | 14 +-- docs/basic-features/font-optimization.md | 108 ++++++++++++++--------- 2 files changed, 74 insertions(+), 48 deletions(-) diff --git a/docs/api-reference/next/font.md b/docs/api-reference/next/font.md index 426b6055852e..19ee4b31d2d4 100644 --- a/docs/api-reference/next/font.md +++ b/docs/api-reference/next/font.md @@ -107,14 +107,14 @@ For usage, review [Local Fonts](/docs/optimizing/fonts#local-fonts). ### `src` -The path of the font file as a string relative to the directory where the font loader function is called or to the `app` directory. +The path of the font file as a string relative to the directory where the font loader function is called or to the `pages` directory. - Required Examples are: -- `'./fonts/my-font.woff2'` where `my-font.woff2` is placed in a directory named `fonts` inside the `app` directory -- if the font loader function is called in `app/page.tsx` using `'../styles/fonts/my-font.ttf'`, then `my-font.ttf` is placed in `styles/fonts` at the root of the project +- `'./fonts/my-font.woff2'` where `my-font.woff2` is placed in a directory named `fonts` inside the `pages` directory +- if the font loader function is called in `pages/index.js` using `'../styles/fonts/my-font.ttf'`, then `my-font.ttf` is placed in `styles/fonts` at the root of the project ### `weight` @@ -194,8 +194,8 @@ If you would like to set your styles in an external style sheet and specify addi In addition to importing the font, also import the CSS file where the CSS variable is defined and set the variable option of the font loader object as follows: -```tsx -// app/page.tsx +```js +// pages/index.js import { Inter } from '@next/font/google' import styles from '../styles/component.module.css' @@ -206,8 +206,8 @@ const inter = Inter({ To use the font, set the `className` of the parent container of the text you would like to style to the font loader's `variable` value and the `className` of the text to the `styles` property from the external CSS file. -```tsx -// app/page.tsx +```js +// pages/index.js

Hello World

diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index 14e387c80cfa..3d78e78295ad 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -26,49 +26,82 @@ 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' +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'; // If loading a variable font, you don't need to specify the font weight const inter = Inter() -export default function RootLayout({ - children, -}: { - children: React.ReactNode, -}) { +export default function MyApp({ Component, pageProps }) { 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' +```js:pages/_app.js +import { Roboto } from '@next/font/google'; const roboto = Roboto({ weight: '400', }) -export default function RootLayout({ - children, -}: { - children: React.ReactNode, -}) { +export default function MyApp({ Component, pageProps }) { + return ( +
+ +
+ ) +} +``` + +#### Apply the font in `` + +You can also use the font without a wrapper and `className` by injecting it inside the `` as follows: + +```js:pages/_app.js +import { Inter } from '@next/font/google'; + +const inter = Inter(); + +export default function MyApp({ Component, pageProps }) { return ( - - {children} - + <> + + + ) } ``` +#### Single page usage + +To use the font on a single page, add it to the specific page as shown below: + +```js:pages/index.js +import { Inter } from '@next/font/google'; + +const inter = Inter(); + +export default function Home() { + return ( +
+

Hello World

+
+ ); +} +``` + #### Specifying a subset Google Fonts are automatically [subset](https://fonts.google.com/knowledge/glossary/subsetting). This reduces the size of the font file and improves performance. You'll need to define which of these subsets you want to preload. Failing to specify any subsets while [`preload`](/docs/api-reference/next/font.md#preload) is true will result in a warning. @@ -77,9 +110,8 @@ This can be done in 2 ways: - On a font per font basis by adding it to the function call - ```tsx - // app/layout.tsx - const inter = Inter({ subsets: ['latin'] }) + ```js:pages/_app.js + const inter = Inter({ subsets: ["latin"] }); ``` - Globally for all your fonts in your `next.config.js` @@ -103,22 +135,17 @@ 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' +```js:pages/_app.js +import localFont from '@next/font/local'; -// Font files can be colocated inside of `app` -const myFont = localFont({ src: './my-font.woff2' }) +// Font files can be colocated inside of `pages` +const myFont = localFont({ src: './my-font.woff2' }); -export default function RootLayout({ - children, -}: { - children: React.ReactNode, -}) { +export default function MyApp({ Component, pageProps }) { return ( - - {children} - +
+ +
) } ``` @@ -129,9 +156,8 @@ View the [Font API Reference](/docs/api-reference/next/font.md#nextfontlocal) fo When a font function is called on a page of your site, it is not globally available and preloaded on all routes. Rather, the font is only preloaded on the related route/s based on the type of file where it is used: -- if it's a [unique page](https://beta.nextjs.org/docs/routing/pages-and-layouts#pages), it is preloaded on the unique route for that page -- if it's a [layout](https://beta.nextjs.org/docs/routing/pages-and-layouts#layouts), it is preloaded on all the routes wrapped by the layout -- if it's the [root layout](https://beta.nextjs.org/docs/routing/pages-and-layouts#root-layout-required), it is preloaded on all routes +- if it's a [unique page](/docs/basic-features/pages), it is preloaded on the unique route for that page +- if it's in the [custom App](/docs/advanced-features/custom-app), it is preloaded on all the routes of the site under `/pages` ## Reusing fonts