docs: update font-optimization.md (#28397)

Adding display property to the examples as just copying them shows a 'Display parameter is missing.' warning. Also added a link to the docs. ## Documentation / Examples - [ ] Make sure the linting passes
vercel · Aug 23, 2021 · d143d98 · d143d98
1 parent 29441fb
commit d143d98
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
@@ -35,7 +35,7 @@ export default function IndexPage() {
     <div>
       <Head>
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter"
+          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
           rel="stylesheet"
         />
       </Head>
@@ -58,7 +58,7 @@ class MyDocument extends Document {
       <Html>
         <Head>
           <link
-            href="https://fonts.googleapis.com/css2?family=Inter"
+            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
             rel="stylesheet"
           />
         </Head>
@@ -76,6 +76,8 @@ export default MyDocument
 
 Automatic Webfont Optimization currently supports Google Fonts and Typekit with support for other font providers coming soon. We're also planning to add control over [loading strategies](https://github.com/vercel/next.js/issues/21555) and `font-display` values.
 
+See [Google Font Display](https://nextjs.org/docs/messages/google-font-display) for more information.
+
 ## Disabling Optimization
 
 If you do not want Next.js to optimize your fonts, you can opt-out.