From 989954d8865d502f991e0f1ad37850261f114bbb Mon Sep 17 00:00:00 2001 From: Ismael Rumzan Date: Mon, 31 Oct 2022 16:27:34 -0600 Subject: [PATCH 1/4] update font optimization page --- docs/basic-features/font-optimization.md | 109 ++++++++++++++--------- 1 file changed, 68 insertions(+), 41 deletions(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index 14e387c80cfada4..6e97a18aeabf638 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` or `_app.tsx` 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 @@ -156,3 +182,4 @@ Every time you call the `localFont` or Google font function, that font is hosted Learn how to optimize images with the Image component. +```` From 71c4a9712d164092a7a1a46ed453aed01e35589e Mon Sep 17 00:00:00 2001 From: Ismael Rumzan Date: Mon, 31 Oct 2022 17:09:49 -0600 Subject: [PATCH 2/4] updated api ref fonts to use /pages --- docs/api-reference/next/font.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/api-reference/next/font.md b/docs/api-reference/next/font.md index 426b6055852e2fa..19ee4b31d2d48a4 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

From 7838cd48317af2000c1a4bfb256318d2662b343d Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 2 Nov 2022 14:36:40 +0100 Subject: [PATCH 3/4] Update docs/basic-features/font-optimization.md Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> --- docs/basic-features/font-optimization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index 6e97a18aeabf638..d119f76903fcc0f 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -26,7 +26,7 @@ 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. -To use the font in all your pages, add it to `_app.js` or `_app.tsx` under `/pages` as shown below: +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'; From f770565d13a27115d6d5782dda05f49d6f9b8dc9 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 2 Nov 2022 14:05:45 +0000 Subject: [PATCH 4/4] Update docs/basic-features/font-optimization.md --- docs/basic-features/font-optimization.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index d119f76903fcc0f..3d78e78295ad600 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -182,4 +182,3 @@ Every time you call the `localFont` or Google font function, that font is hosted Learn how to optimize images with the Image component. -````