From edabb95f3aa9d9d6b666b30d6046de51d20458cf Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Sat, 4 Apr 2020 14:36:29 -0700
Subject: [PATCH 01/12] Updating native-url version

---
 packages/next/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/package.json b/packages/next/package.json
index a72c2e1e6af4b..3f0e8fd3f508c 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -83,7 +83,7 @@
     "jest-worker": "24.9.0",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "0.8.0",
-    "native-url": "0.2.6",
+    "native-url": "0.3.0",
     "pnp-webpack-plugin": "1.5.0",
     "postcss": "7.0.27",
     "prop-types": "15.7.2",

From c1470991c1efb7b995961e0d743d6029768ade6a Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Sat, 4 Apr 2020 17:32:37 -0700
Subject: [PATCH 02/12] Bump version

---
 packages/next/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/package.json b/packages/next/package.json
index 3f0e8fd3f508c..8cb0f1dd11d3d 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -83,7 +83,7 @@
     "jest-worker": "24.9.0",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "0.8.0",
-    "native-url": "0.3.0",
+    "native-url": "0.3.1",
     "pnp-webpack-plugin": "1.5.0",
     "postcss": "7.0.27",
     "prop-types": "15.7.2",

From 7f37a0f40df155083d874bd31e7fd6bb497ce0c1 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Fri, 29 Jan 2021 13:31:06 -0800
Subject: [PATCH 03/12] Enable font optimization by dafault

---
 packages/next/build/index.ts                  | 10 ++++-----
 packages/next/build/webpack-config.ts         |  8 +------
 .../next-serverless-loader/page-handler.ts    | 16 ++++++--------
 .../font-stylesheet-gathering-plugin.ts       |  4 +---
 packages/next/export/index.ts                 |  1 -
 packages/next/export/worker.ts                | 22 ++++---------------
 packages/next/next-server/lib/head.tsx        |  6 +----
 packages/next/next-server/lib/post-process.ts |  9 +-------
 packages/next/next-server/server/config.ts    |  1 -
 .../next/next-server/server/next-server.ts    | 16 +++++---------
 packages/next/next-server/server/render.tsx   | 19 ++++++----------
 packages/next/pages/_document.tsx             | 11 ++--------
 .../build-output/test/index.test.js           |  4 ++--
 .../font-optimization/test/index.test.js      | 10 +++------
 14 files changed, 38 insertions(+), 99 deletions(-)

diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index 0ca466995703f..f4579980dc99b 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -410,12 +410,10 @@ export default async function build(
           BUILD_MANIFEST,
           PRERENDER_MANIFEST,
           REACT_LOADABLE_MANIFEST,
-          config.experimental.optimizeFonts
-            ? path.join(
-                isLikeServerless ? SERVERLESS_DIRECTORY : SERVER_DIRECTORY,
-                FONT_MANIFEST
-              )
-            : null,
+          path.join(
+            isLikeServerless ? SERVERLESS_DIRECTORY : SERVER_DIRECTORY,
+            FONT_MANIFEST
+          ),
           BUILD_ID_FILE,
         ]
           .filter(nonNullable)
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 686ecd3cdde34..7323cce7f4508 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -1006,9 +1006,6 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_REACT_MODE': JSON.stringify(
           config.experimental.reactMode
         ),
-        'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
-          config.experimental.optimizeFonts && !dev
-        ),
         'process.env.__NEXT_OPTIMIZE_IMAGES': JSON.stringify(
           config.experimental.optimizeImages
         ),
@@ -1110,9 +1107,7 @@ export default async function getBaseWebpackConfig(
           rewrites,
         }),
       new ProfilingPlugin(),
-      config.experimental.optimizeFonts &&
-        !dev &&
-        isServer &&
+      isServer &&
         (function () {
           const {
             FontStylesheetGatheringPlugin,
@@ -1200,7 +1195,6 @@ export default async function getBaseWebpackConfig(
       plugins: config.experimental.plugins,
       reactStrictMode: config.reactStrictMode,
       reactMode: config.experimental.reactMode,
-      optimizeFonts: config.experimental.optimizeFonts,
       optimizeImages: config.experimental.optimizeImages,
       optimizeCss: config.experimental.optimizeCss,
       scrollRestoration: config.experimental.scrollRestoration,
diff --git a/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts b/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts
index 3bfccc2bd22ca..48eb98f31564e 100644
--- a/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts
+++ b/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts
@@ -281,15 +281,13 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
       const previewData = tryGetPreviewData(req, res, options.previewProps)
       const isPreviewMode = previewData !== false
 
-      if (process.env.__NEXT_OPTIMIZE_FONTS) {
-        renderOpts.optimizeFonts = true
-        /**
-         * __webpack_require__.__NEXT_FONT_MANIFEST__ is added by
-         * font-stylesheet-gathering-plugin
-         */
-        // @ts-ignore
-        renderOpts.fontManifest = __webpack_require__.__NEXT_FONT_MANIFEST__
-      }
+      renderOpts.optimizeFonts = true
+      /**
+       * __webpack_require__.__NEXT_FONT_MANIFEST__ is added by
+       * font-stylesheet-gathering-plugin
+       */
+      // @ts-ignore
+      renderOpts.fontManifest = __webpack_require__.__NEXT_FONT_MANIFEST__
 
       let result = await renderToHTML(
         req,
diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index ba003408ed629..b9470eacf8c19 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -153,9 +153,7 @@ export class FontStylesheetGatheringPlugin {
                   isWebpack5 ? '__webpack_require__' : mainTemplate.requireFn
                 }.__NEXT_FONT_MANIFEST__ = ${JSON.stringify(
               this.manifestContent
-            )};
-            // Enable feature:
-            process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true);`
+            )};`
           }
         )
       }
diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
index c820e25c8904d..9480c22dc198f 100644
--- a/packages/next/export/index.ts
+++ b/packages/next/export/index.ts
@@ -526,7 +526,6 @@ export default async function exportApp(
             subFolders,
             buildExport: options.buildExport,
             serverless: isTargetLikeServerless(nextConfig.target),
-            optimizeFonts: nextConfig.experimental.optimizeFonts,
             optimizeImages: nextConfig.experimental.optimizeImages,
             optimizeCss: nextConfig.experimental.optimizeCss,
             spanContext,
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 01e17ade79006..9572140f86636 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -49,7 +49,6 @@ interface ExportPageInput {
   serverRuntimeConfig: string
   subFolders?: boolean
   serverless: boolean
-  optimizeFonts: boolean
   optimizeImages: boolean
   optimizeCss: any
   spanContext: any
@@ -70,7 +69,6 @@ interface RenderOpts {
   ampSkipValidation?: boolean
   hybridAmp?: boolean
   inAmpMode?: boolean
-  optimizeFonts?: boolean
   optimizeImages?: boolean
   optimizeCss?: any
   fontManifest?: FontManifest
@@ -96,7 +94,6 @@ export default async function exportPage({
   serverRuntimeConfig,
   subFolders,
   serverless,
-  optimizeFonts,
   optimizeImages,
   optimizeCss,
 }: ExportPageInput): Promise<ExportPageResults> {
@@ -268,15 +265,11 @@ export default async function exportPage({
                 {
                   ampPath: renderAmpPath,
                   /// @ts-ignore
-                  optimizeFonts,
-                  /// @ts-ignore
                   optimizeImages,
                   /// @ts-ignore
                   optimizeCss,
                   distDir,
-                  fontManifest: optimizeFonts
-                    ? requireFontManifest(distDir, serverless)
-                    : null,
+                  fontManifest: requireFontManifest(distDir, serverless),
                   locale: locale!,
                   locales: renderOpts.locales!,
                 },
@@ -318,13 +311,9 @@ export default async function exportPage({
             } else {
               /**
                * This sets environment variable to be used at the time of static export by head.tsx.
-               * Using this from process.env allows targeting both serverless and SSR by calling
-               * `process.env.__NEXT_OPTIMIZE_FONTS`.
-               * TODO(prateekbh@): Remove this when experimental.optimizeFonts are being cleaned up.
+               * Using this from process.env allows targeting both serverless and SSR
+               * TODO: Remove this when experimental flags are being cleaned up.
                */
-              if (optimizeFonts) {
-                process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true)
-              }
               if (optimizeImages) {
                 process.env.__NEXT_OPTIMIZE_IMAGES = JSON.stringify(true)
               }
@@ -336,12 +325,9 @@ export default async function exportPage({
                 ...renderOpts,
                 ampPath: renderAmpPath,
                 params,
-                optimizeFonts,
                 optimizeImages,
                 optimizeCss,
-                fontManifest: optimizeFonts
-                  ? requireFontManifest(distDir, serverless)
-                  : null,
+                fontManifest: requireFontManifest(distDir, serverless),
                 locale: locale as string,
               }
               // @ts-ignore
diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index 2a6fa5a40e13b..ea9669a086449 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -138,11 +138,7 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
-      if (
-        process.env.NODE_ENV !== 'development' &&
-        process.env.__NEXT_OPTIMIZE_FONTS &&
-        !props.inAmpMode
-      ) {
+      if (process.env.NODE_ENV !== 'development' && !props.inAmpMode) {
         if (
           c.type === 'link' &&
           c.props['href'] &&
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index c991a5572cd27..88b7045810846 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -6,7 +6,6 @@ const MAXIMUM_IMAGE_PRELOADS = 2
 const IMAGE_PRELOAD_SIZE_THRESHOLD = 2500
 
 type postProcessOptions = {
-  optimizeFonts: boolean
   optimizeImages: boolean
 }
 
@@ -255,13 +254,7 @@ function sourceIsSupportedType(imgSrc: string): boolean {
 }
 
 // Initialization
-registerPostProcessor(
-  'Inline-Fonts',
-  new FontOptimizerMiddleware(),
-  // Using process.env because passing Experimental flag through loader is not possible.
-  // @ts-ignore
-  (options) => options.optimizeFonts || process.env.__NEXT_OPTIMIZE_FONTS
-)
+registerPostProcessor('Inline-Fonts', new FontOptimizerMiddleware(), () => true)
 
 registerPostProcessor(
   'Preload Images',
diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
index 2408b923a7800..196bd1cad4bde 100644
--- a/packages/next/next-server/server/config.ts
+++ b/packages/next/next-server/server/config.ts
@@ -82,7 +82,6 @@ const defaultConfig: NextConfig = {
     reactMode: 'legacy',
     workerThreads: false,
     pageEnv: false,
-    optimizeFonts: false,
     optimizeImages: false,
     optimizeCss: false,
     scrollRestoration: false,
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 7d0325545fe06..9bfd501f4eedd 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -151,7 +151,6 @@ export default class Server {
     customServer?: boolean
     ampOptimizerConfig?: { [key: string]: any }
     basePath: string
-    optimizeFonts: boolean
     images: string
     fontManifest: FontManifest
     optimizeImages: boolean
@@ -209,11 +208,9 @@ export default class Server {
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.basePath,
       images: JSON.stringify(this.nextConfig.images),
-      optimizeFonts: this.nextConfig.experimental.optimizeFonts && !dev,
-      fontManifest:
-        this.nextConfig.experimental.optimizeFonts && !dev
-          ? requireFontManifest(this.distDir, this._isLikeServerless)
-          : null,
+      fontManifest: !dev
+        ? requireFontManifest(this.distDir, this._isLikeServerless)
+        : null,
       optimizeImages: this.nextConfig.experimental.optimizeImages,
       optimizeCss: this.nextConfig.experimental.optimizeCss,
       domainLocales: this.nextConfig.i18n?.domains,
@@ -275,13 +272,10 @@ export default class Server {
 
     /**
      * This sets environment variable to be used at the time of SSR by head.tsx.
-     * Using this from process.env allows targetting both serverless and SSR by calling
+     * Using this from process.env allows targeting both serverless and SSR by calling
      * `process.env.__NEXT_OPTIMIZE_IMAGES`.
-     * TODO(atcastle@): Remove this when experimental.optimizeImages are being clened up.
+     * TODO(atcastle@): Remove this when experimental.optimizeImages are being cleaned up.
      */
-    if (this.renderOpts.optimizeFonts) {
-      process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true)
-    }
     if (this.renderOpts.optimizeImages) {
       process.env.__NEXT_OPTIMIZE_IMAGES = JSON.stringify(true)
     }
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 2044373d6a447..91183eeadae60 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -175,7 +175,6 @@ export type RenderOptsPartial = {
   basePath: string
   unstable_runtimeJS?: false
   unstable_JsPreload?: false
-  optimizeFonts: boolean
   fontManifest?: FontManifest
   optimizeImages: boolean
   optimizeCss: any
@@ -1088,17 +1087,13 @@ export async function renderToHTML(
     }
   }
 
-  // Avoid postProcess if both flags are false
-  if (process.env.__NEXT_OPTIMIZE_FONTS || process.env.__NEXT_OPTIMIZE_IMAGES) {
-    html = await postProcess(
-      html,
-      { getFontDefinition },
-      {
-        optimizeFonts: renderOpts.optimizeFonts,
-        optimizeImages: renderOpts.optimizeImages,
-      }
-    )
-  }
+  html = await postProcess(
+    html,
+    { getFontDefinition },
+    {
+      optimizeImages: renderOpts.optimizeImages,
+    }
+  )
 
   if (renderOpts.optimizeCss) {
     // eslint-disable-next-line import/no-extraneous-dependencies
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 5f5bf42ebe720..1e02b00a67772 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -215,10 +215,7 @@ export class Head extends Component<
       )
     })
 
-    if (
-      process.env.NODE_ENV !== 'development' &&
-      process.env.__NEXT_OPTIMIZE_FONTS
-    ) {
+    if (process.env.NODE_ENV !== 'development') {
       cssLinkElements = this.makeStylesheetInert(
         cssLinkElements
       ) as ReactElement[]
@@ -394,11 +391,7 @@ export class Head extends Component<
         )
     }
 
-    if (
-      process.env.NODE_ENV !== 'development' &&
-      process.env.__NEXT_OPTIMIZE_FONTS &&
-      !inAmpMode
-    ) {
+    if (process.env.NODE_ENV !== 'development' && !inAmpMode) {
       children = this.makeStylesheetInert(children)
     }
 
diff --git a/test/integration/build-output/test/index.test.js b/test/integration/build-output/test/index.test.js
index cf8eca1c83ff2..6a17f942e068f 100644
--- a/test/integration/build-output/test/index.test.js
+++ b/test/integration/build-output/test/index.test.js
@@ -98,10 +98,10 @@ describe('Build Output', () => {
       expect(parseFloat(indexFirstLoad)).toBeCloseTo(63.8, 1)
       expect(indexFirstLoad.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(err404Size) - 3.7).toBeLessThanOrEqual(0)
+      expect(parseFloat(err404Size)).toBeCloseTo(3.7, 1)
       expect(err404Size.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(err404FirstLoad)).toBeCloseTo(67, 1)
+      expect(parseFloat(err404FirstLoad)).toBeCloseTo(67.2, 1)
       expect(err404FirstLoad.endsWith('kB')).toBe(true)
 
       expect(parseFloat(sharedByAll)).toBeCloseTo(63.5, 1)
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 358e48c1dd643..90f0bdfe142e2 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -117,11 +117,7 @@ function runTests() {
 
 describe('Font optimization for SSR apps', () => {
   beforeAll(async () => {
-    await fs.writeFile(
-      nextConfig,
-      `module.exports = { experimental: {optimizeFonts: true} }`,
-      'utf8'
-    )
+    await fs.writeFile(nextConfig, `module.exports = {}`, 'utf8')
 
     if (fs.pathExistsSync(join(appDir, '.next'))) {
       await fs.remove(join(appDir, '.next'))
@@ -140,7 +136,7 @@ describe('Font optimization for serverless apps', () => {
   beforeAll(async () => {
     await fs.writeFile(
       nextConfig,
-      `module.exports = { target: 'serverless', experimental: {optimizeFonts: true} }`,
+      `module.exports = { target: 'serverless' }`,
       'utf8'
     )
     await nextBuild(appDir)
@@ -157,7 +153,7 @@ describe('Font optimization for emulated serverless apps', () => {
   beforeAll(async () => {
     await fs.writeFile(
       nextConfig,
-      `module.exports = { target: 'experimental-serverless-trace', experimental: {optimizeFonts: true} }`,
+      `module.exports = { target: 'experimental-serverless-trace' }`,
       'utf8'
     )
     await nextBuild(appDir)

From 16b5cf2d00f8d5d895e6298a21fdea4decda166b Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Fri, 29 Jan 2021 16:07:27 -0800
Subject: [PATCH 04/12] Refactor test case

---
 .../font-optimization/test/index.test.js        | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 90f0bdfe142e2..5c2323af2a1ba 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -10,6 +10,7 @@ import {
   initNextServerScript,
 } from 'next-test-utils'
 import fs from 'fs-extra'
+import cheerio from 'cheerio'
 
 jest.setTimeout(1000 * 60 * 2)
 
@@ -54,13 +55,21 @@ function runTests() {
 
   it('should pass nonce to the inlined font definition', async () => {
     const html = await renderViaHTTP(appPort, '/nonce')
+    const $ = cheerio.load(html)
     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
-    expect(html).toContain(
-      '<link rel="stylesheet" nonce="VmVyY2Vs" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
+
+    const link = $(
+      'link[rel="stylesheet"][data-href="https://fonts.googleapis.com/css2?family=Modak"]'
     )
-    expect(html).toMatch(
-      /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Modak" nonce="VmVyY2Vs">.*<\/style>/
+    const nonce = link.attr('nonce')
+    const style = $(
+      'style[data-href="https://fonts.googleapis.com/css2?family=Modak"]'
     )
+    const styleNonce = style.attr('nonce')
+
+    expect(link).toBeDefined()
+    expect(nonce).toBe('VmVyY2Vs')
+    expect(styleNonce).toBe('VmVyY2Vs')
   })
 
   it('should inline the google fonts for static pages with Next/Head', async () => {

From 646edce01e8667916a47cbe65be34c6952ffb359 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 8 Mar 2021 09:13:13 -0600
Subject: [PATCH 05/12] Update build-output test

---
 test/integration/build-output/test/index.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/integration/build-output/test/index.test.js b/test/integration/build-output/test/index.test.js
index 45ff04846d773..2603cdda98ac9 100644
--- a/test/integration/build-output/test/index.test.js
+++ b/test/integration/build-output/test/index.test.js
@@ -101,7 +101,7 @@ describe('Build Output', () => {
       expect(parseFloat(err404Size)).toBeCloseTo(3.7, 1)
       expect(err404Size.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(err404FirstLoad)).toBeCloseTo(67.1, 0)
+      expect(parseFloat(err404FirstLoad)).toBeCloseTo(67.6, 0)
       expect(err404FirstLoad.endsWith('kB')).toBe(true)
 
       expect(parseFloat(sharedByAll)).toBeCloseTo(63.9, 1)

From e1b801b44cd6c96b0a55a9e8a7993bee90f83562 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Mon, 8 Mar 2021 22:48:58 -0800
Subject: [PATCH 06/12] Moving optimizeFonts flag outside experimental and
 default true

---
 packages/next/build/index.ts                  | 10 ++++++----
 packages/next/build/webpack-config.ts         |  8 +++++++-
 .../next-serverless-loader/page-handler.ts    | 16 +++++++++-------
 .../font-stylesheet-gathering-plugin.ts       |  4 +++-
 packages/next/export/index.ts                 |  1 +
 packages/next/export/worker.ts                | 17 +++++++++++++++--
 packages/next/next-server/lib/head.tsx        |  6 +++++-
 packages/next/next-server/lib/post-process.ts |  9 ++++++++-
 .../next/next-server/server/config-shared.ts  |  2 +-
 .../next/next-server/server/next-server.ts    | 12 +++++++++---
 packages/next/next-server/server/render.tsx   | 19 ++++++++++++-------
 packages/next/pages/_document.tsx             | 11 +++++++++--
 .../font-optimization/test/index.test.js      |  4 ++--
 13 files changed, 87 insertions(+), 32 deletions(-)

diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index c4425d1c3f032..f66a0178c3ded 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -413,10 +413,12 @@ export default async function build(
           BUILD_MANIFEST,
           PRERENDER_MANIFEST,
           REACT_LOADABLE_MANIFEST,
-          path.join(
-            isLikeServerless ? SERVERLESS_DIRECTORY : SERVER_DIRECTORY,
-            FONT_MANIFEST
-          ),
+          config.optimizeFonts
+            ? path.join(
+                isLikeServerless ? SERVERLESS_DIRECTORY : SERVER_DIRECTORY,
+                FONT_MANIFEST
+              )
+            : null,
           BUILD_ID_FILE,
         ]
           .filter(nonNullable)
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index be3bb218ce0eb..20e5620572eca 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -1027,6 +1027,9 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_REACT_MODE': JSON.stringify(
           config.experimental.reactMode
         ),
+        'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
+          config.optimizeFonts && !dev
+        ),
         'process.env.__NEXT_OPTIMIZE_IMAGES': JSON.stringify(
           config.experimental.optimizeImages
         ),
@@ -1138,7 +1141,9 @@ export default async function getBaseWebpackConfig(
           distDir,
         }),
       new ProfilingPlugin(),
-      isServer &&
+      config.optimizeFonts &&
+        !dev &&
+        isServer &&
         (function () {
           const {
             FontStylesheetGatheringPlugin,
@@ -1236,6 +1241,7 @@ export default async function getBaseWebpackConfig(
       plugins: config.experimental.plugins,
       reactStrictMode: config.reactStrictMode,
       reactMode: config.experimental.reactMode,
+      optimizeFonts: config.optimizeFonts,
       optimizeImages: config.experimental.optimizeImages,
       optimizeCss: config.experimental.optimizeCss,
       scrollRestoration: config.experimental.scrollRestoration,
diff --git a/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts b/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts
index 48eb98f31564e..3bfccc2bd22ca 100644
--- a/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts
+++ b/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts
@@ -281,13 +281,15 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
       const previewData = tryGetPreviewData(req, res, options.previewProps)
       const isPreviewMode = previewData !== false
 
-      renderOpts.optimizeFonts = true
-      /**
-       * __webpack_require__.__NEXT_FONT_MANIFEST__ is added by
-       * font-stylesheet-gathering-plugin
-       */
-      // @ts-ignore
-      renderOpts.fontManifest = __webpack_require__.__NEXT_FONT_MANIFEST__
+      if (process.env.__NEXT_OPTIMIZE_FONTS) {
+        renderOpts.optimizeFonts = true
+        /**
+         * __webpack_require__.__NEXT_FONT_MANIFEST__ is added by
+         * font-stylesheet-gathering-plugin
+         */
+        // @ts-ignore
+        renderOpts.fontManifest = __webpack_require__.__NEXT_FONT_MANIFEST__
+      }
 
       let result = await renderToHTML(
         req,
diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index 9c403061e5e24..ba1aad7327fe8 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -157,7 +157,9 @@ export class FontStylesheetGatheringPlugin {
                   isWebpack5 ? '__webpack_require__' : mainTemplate.requireFn
                 }.__NEXT_FONT_MANIFEST__ = ${JSON.stringify(
               this.manifestContent
-            )};`
+            )};
+            // Enable feature:
+            process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true);`
           }
         )
       }
diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
index b058db787f790..d42d2452e4d7a 100644
--- a/packages/next/export/index.ts
+++ b/packages/next/export/index.ts
@@ -530,6 +530,7 @@ export default async function exportApp(
             subFolders,
             buildExport: options.buildExport,
             serverless: isTargetLikeServerless(nextConfig.target),
+            optimizeFonts: nextConfig.optimizeFonts,
             optimizeImages: nextConfig.experimental.optimizeImages,
             optimizeCss: nextConfig.experimental.optimizeCss,
             spanContext,
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index db5af2bbfb4b3..b910dcfa79d01 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -49,6 +49,7 @@ interface ExportPageInput {
   serverRuntimeConfig: string
   subFolders?: boolean
   serverless: boolean
+  optimizeFonts: boolean
   optimizeImages: boolean
   optimizeCss: any
   spanContext: any
@@ -69,6 +70,7 @@ interface RenderOpts {
   ampSkipValidation?: boolean
   hybridAmp?: boolean
   inAmpMode?: boolean
+  optimizeFonts?: boolean
   optimizeImages?: boolean
   optimizeCss?: any
   fontManifest?: FontManifest
@@ -94,6 +96,7 @@ export default async function exportPage({
   serverRuntimeConfig,
   subFolders,
   serverless,
+  optimizeFonts,
   optimizeImages,
   optimizeCss,
 }: ExportPageInput): Promise<ExportPageResults> {
@@ -269,11 +272,15 @@ export default async function exportPage({
                 {
                   ampPath: renderAmpPath,
                   /// @ts-ignore
+                  optimizeFonts,
+                  /// @ts-ignore
                   optimizeImages,
                   /// @ts-ignore
                   optimizeCss,
                   distDir,
-                  fontManifest: requireFontManifest(distDir, serverless),
+                  fontManifest: optimizeFonts
+                    ? requireFontManifest(distDir, serverless)
+                    : null,
                   locale: locale!,
                   locales: renderOpts.locales!,
                 },
@@ -318,6 +325,9 @@ export default async function exportPage({
                * Using this from process.env allows targeting both serverless and SSR
                * TODO: Remove this when experimental flags are being cleaned up.
                */
+              if (optimizeFonts) {
+                process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true)
+              }
               if (optimizeImages) {
                 process.env.__NEXT_OPTIMIZE_IMAGES = JSON.stringify(true)
               }
@@ -329,9 +339,12 @@ export default async function exportPage({
                 ...renderOpts,
                 ampPath: renderAmpPath,
                 params,
+                optimizeFonts,
                 optimizeImages,
                 optimizeCss,
-                fontManifest: requireFontManifest(distDir, serverless),
+                fontManifest: optimizeFonts
+                  ? requireFontManifest(distDir, serverless)
+                  : null,
                 locale: locale as string,
               }
               // @ts-ignore
diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index ea9669a086449..2a6fa5a40e13b 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -138,7 +138,11 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
-      if (process.env.NODE_ENV !== 'development' && !props.inAmpMode) {
+      if (
+        process.env.NODE_ENV !== 'development' &&
+        process.env.__NEXT_OPTIMIZE_FONTS &&
+        !props.inAmpMode
+      ) {
         if (
           c.type === 'link' &&
           c.props['href'] &&
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 88b7045810846..c991a5572cd27 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -6,6 +6,7 @@ const MAXIMUM_IMAGE_PRELOADS = 2
 const IMAGE_PRELOAD_SIZE_THRESHOLD = 2500
 
 type postProcessOptions = {
+  optimizeFonts: boolean
   optimizeImages: boolean
 }
 
@@ -254,7 +255,13 @@ function sourceIsSupportedType(imgSrc: string): boolean {
 }
 
 // Initialization
-registerPostProcessor('Inline-Fonts', new FontOptimizerMiddleware(), () => true)
+registerPostProcessor(
+  'Inline-Fonts',
+  new FontOptimizerMiddleware(),
+  // Using process.env because passing Experimental flag through loader is not possible.
+  // @ts-ignore
+  (options) => options.optimizeFonts || process.env.__NEXT_OPTIMIZE_FONTS
+)
 
 registerPostProcessor(
   'Preload Images',
diff --git a/packages/next/next-server/server/config-shared.ts b/packages/next/next-server/server/config-shared.ts
index 4eaf5b2e7d3ea..5cbb2e9b61330 100644
--- a/packages/next/next-server/server/config-shared.ts
+++ b/packages/next/next-server/server/config-shared.ts
@@ -61,6 +61,7 @@ export const defaultConfig: NextConfig = {
   trailingSlash: false,
   i18n: null,
   productionBrowserSourceMaps: false,
+  optimizeFonts: true,
   experimental: {
     cpus: Math.max(
       1,
@@ -73,7 +74,6 @@ export const defaultConfig: NextConfig = {
     reactMode: 'legacy',
     workerThreads: false,
     pageEnv: false,
-    optimizeFonts: false,
     optimizeImages: false,
     optimizeCss: false,
     scrollRestoration: false,
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index aed271e2bd339..32f38441cc1d6 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -147,6 +147,7 @@ export default class Server {
     customServer?: boolean
     ampOptimizerConfig?: { [key: string]: any }
     basePath: string
+    optimizeFonts: boolean
     images: string
     fontManifest: FontManifest
     optimizeImages: boolean
@@ -204,9 +205,11 @@ export default class Server {
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.basePath,
       images: JSON.stringify(this.nextConfig.images),
-      fontManifest: !dev
-        ? requireFontManifest(this.distDir, this._isLikeServerless)
-        : null,
+      optimizeFonts: this.nextConfig.optimizeFonts && !dev,
+      fontManifest:
+        this.nextConfig.optimizeFonts && !dev
+          ? requireFontManifest(this.distDir, this._isLikeServerless)
+          : null,
       optimizeImages: this.nextConfig.experimental.optimizeImages,
       optimizeCss: this.nextConfig.experimental.optimizeCss,
       domainLocales: this.nextConfig.i18n?.domains,
@@ -273,6 +276,9 @@ export default class Server {
      * `process.env.__NEXT_OPTIMIZE_IMAGES`.
      * TODO(atcastle@): Remove this when experimental.optimizeImages are being cleaned up.
      */
+    if (this.renderOpts.optimizeFonts) {
+      process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true)
+    }
     if (this.renderOpts.optimizeImages) {
       process.env.__NEXT_OPTIMIZE_IMAGES = JSON.stringify(true)
     }
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 95848cdb9c5f4..11308daf74128 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -183,6 +183,7 @@ export type RenderOptsPartial = {
   unstable_runtimeJS?: false
   unstable_JsPreload?: false
   fontManifest?: FontManifest
+  optimizeFonts: boolean
   optimizeImages: boolean
   optimizeCss: any
   devOnlyCacheBusterQueryString?: string
@@ -1117,13 +1118,17 @@ export async function renderToHTML(
     }
   }
 
-  html = await postProcess(
-    html,
-    { getFontDefinition },
-    {
-      optimizeImages: renderOpts.optimizeImages,
-    }
-  )
+  // Avoid postProcess if both flags are false
+  if (process.env.__NEXT_OPTIMIZE_FONTS || process.env.__NEXT_OPTIMIZE_IMAGES) {
+    html = await postProcess(
+      html,
+      { getFontDefinition },
+      {
+        optimizeFonts: renderOpts.optimizeFonts,
+        optimizeImages: renderOpts.optimizeImages,
+      }
+    )
+  }
 
   if (renderOpts.optimizeCss) {
     // eslint-disable-next-line import/no-extraneous-dependencies
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 0959d5275bbef..882fe217c0908 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -218,7 +218,10 @@ export class Head extends Component<
       )
     })
 
-    if (process.env.NODE_ENV !== 'development') {
+    if (
+      process.env.NODE_ENV !== 'development' &&
+      process.env.__NEXT_OPTIMIZE_FONTS
+    ) {
       cssLinkElements = this.makeStylesheetInert(
         cssLinkElements
       ) as ReactElement[]
@@ -422,7 +425,11 @@ export class Head extends Component<
         )
     }
 
-    if (process.env.NODE_ENV !== 'development' && !inAmpMode) {
+    if (
+      process.env.NODE_ENV !== 'development' &&
+      process.env.__NEXT_OPTIMIZE_FONTS &&
+      !inAmpMode
+    ) {
       children = this.makeStylesheetInert(children)
     }
 
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 5c2323af2a1ba..3e2449c29f479 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -145,7 +145,7 @@ describe('Font optimization for serverless apps', () => {
   beforeAll(async () => {
     await fs.writeFile(
       nextConfig,
-      `module.exports = { target: 'serverless' }`,
+      `module.exports = { target: 'serverless', optimizeFonts: true }`,
       'utf8'
     )
     await nextBuild(appDir)
@@ -162,7 +162,7 @@ describe('Font optimization for emulated serverless apps', () => {
   beforeAll(async () => {
     await fs.writeFile(
       nextConfig,
-      `module.exports = { target: 'experimental-serverless-trace' }`,
+      `module.exports = { target: 'experimental-serverless-trace', optimizeFonts: true }`,
       'utf8'
     )
     await nextBuild(appDir)

From 2a10bcac362a484ed4b3fe46360635396078c7a5 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Mon, 8 Mar 2021 22:52:27 -0800
Subject: [PATCH 07/12] Remove flag in tests

---
 packages/next/next-server/server/render.tsx           | 2 +-
 test/integration/font-optimization/test/index.test.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 11308daf74128..8830769d9c418 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -182,8 +182,8 @@ export type RenderOptsPartial = {
   basePath: string
   unstable_runtimeJS?: false
   unstable_JsPreload?: false
-  fontManifest?: FontManifest
   optimizeFonts: boolean
+  fontManifest?: FontManifest
   optimizeImages: boolean
   optimizeCss: any
   devOnlyCacheBusterQueryString?: string
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 3e2449c29f479..5c2323af2a1ba 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -145,7 +145,7 @@ describe('Font optimization for serverless apps', () => {
   beforeAll(async () => {
     await fs.writeFile(
       nextConfig,
-      `module.exports = { target: 'serverless', optimizeFonts: true }`,
+      `module.exports = { target: 'serverless' }`,
       'utf8'
     )
     await nextBuild(appDir)
@@ -162,7 +162,7 @@ describe('Font optimization for emulated serverless apps', () => {
   beforeAll(async () => {
     await fs.writeFile(
       nextConfig,
-      `module.exports = { target: 'experimental-serverless-trace', optimizeFonts: true }`,
+      `module.exports = { target: 'experimental-serverless-trace' }`,
       'utf8'
     )
     await nextBuild(appDir)

From 03e6eb62e630970ab7e3003f1d02fd460ecf08f1 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 31 Mar 2021 23:52:08 -0700
Subject: [PATCH 08/12] Font bugfix. Handle failure to download fonts during
 build

---
 .../font-stylesheet-gathering-plugin.ts       | 13 +++--
 .../next/next-server/server/font-utils.ts     | 48 ++++++++++++-------
 packages/next/pages/_document.tsx             |  2 +-
 .../font-optimization/pages/_document.js      |  1 +
 4 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index ba1aad7327fe8..161b9c35f0e91 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -173,11 +173,14 @@ export class FontStylesheetGatheringPlugin {
           this.manifestContent = []
           for (let promiseIndex in fontDefinitionPromises) {
             const css = await fontDefinitionPromises[promiseIndex]
-            const content = await minifyCss(css)
-            this.manifestContent.push({
-              url: this.gatheredStylesheets[promiseIndex],
-              content,
-            })
+
+            if (css) {
+              const content = await minifyCss(css)
+              this.manifestContent.push({
+                url: this.gatheredStylesheets[promiseIndex],
+                content,
+              })
+            }
           }
           if (!isWebpack5) {
             compilation.assets[FONT_MANIFEST] = new sources.RawSource(
diff --git a/packages/next/next-server/server/font-utils.ts b/packages/next/next-server/server/font-utils.ts
index 6120ff10be27b..36cc4b86355ec 100644
--- a/packages/next/next-server/server/font-utils.ts
+++ b/packages/next/next-server/server/font-utils.ts
@@ -10,24 +10,28 @@ export type FontManifest = Array<{
 }>
 
 function getFontForUA(url: string, UA: string): Promise<String> {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     let rawData: any = ''
-    https.get(
-      url,
-      {
-        headers: {
-          'user-agent': UA,
+    https
+      .get(
+        url,
+        {
+          headers: {
+            'user-agent': UA,
+          },
         },
-      },
-      (res: any) => {
-        res.on('data', (chunk: any) => {
-          rawData += chunk
-        })
-        res.on('end', () => {
-          resolve(rawData.toString('utf8'))
-        })
-      }
-    )
+        (res: any) => {
+          res.on('data', (chunk: any) => {
+            rawData += chunk
+          })
+          res.on('end', () => {
+            resolve(rawData.toString('utf8'))
+          })
+        }
+      )
+      .on('error', (e) => {
+        reject(e)
+      })
   })
 }
 
@@ -39,8 +43,16 @@ export async function getFontDefinitionFromNetwork(
    * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
    * CSS cascading 🤷‍♂️.
    */
-  result += await getFontForUA(url, IE_UA)
-  result += await getFontForUA(url, CHROME_UA)
+  try {
+    result += await getFontForUA(url, IE_UA)
+    result += await getFontForUA(url, CHROME_UA)
+  } catch (e) {
+    console.warn(
+      `Failed to download the stylesheet for ${url} during the font optimization step`
+    )
+    return ''
+  }
+
   return result
 }
 
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index dea39bef67cc2..888601fe3d31f 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -398,7 +398,7 @@ export class Head extends Component<
       })
       head = cssPreloads.concat(otherHeadElements)
     }
-    let children = this.props.children
+    let children = this.props.children.filter(Boolean)
     // show a warning if Head contains <title> (only in development)
     if (process.env.NODE_ENV !== 'production') {
       children = React.Children.map(children, (child: any) => {
diff --git a/test/integration/font-optimization/pages/_document.js b/test/integration/font-optimization/pages/_document.js
index 59d8fe75cd4c4..f3f300181f324 100644
--- a/test/integration/font-optimization/pages/_document.js
+++ b/test/integration/font-optimization/pages/_document.js
@@ -19,6 +19,7 @@ export default class MyDocument extends Document {
             rel="stylesheet"
             href="https://fonts.googleapis.com/css?family=Voces"
           />
+          {false && <script data-href="test"></script>}
         </Head>
         <body>
           <Main />

From 4457df95ed6d18f54cedc96b1163dbe0c3a6c101 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 31 Mar 2021 23:56:23 -0700
Subject: [PATCH 09/12] Update error message

---
 packages/next/next-server/server/font-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/next-server/server/font-utils.ts b/packages/next/next-server/server/font-utils.ts
index 36cc4b86355ec..31dad54bb5966 100644
--- a/packages/next/next-server/server/font-utils.ts
+++ b/packages/next/next-server/server/font-utils.ts
@@ -48,7 +48,7 @@ export async function getFontDefinitionFromNetwork(
     result += await getFontForUA(url, CHROME_UA)
   } catch (e) {
     console.warn(
-      `Failed to download the stylesheet for ${url} during the font optimization step`
+      `Unable to optimize font for ${url}. Failed to download the stylesheet.`
     )
     return ''
   }

From 08c0f1da381223982a429526a183b8bc59782bbd Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Thu, 1 Apr 2021 00:12:38 -0700
Subject: [PATCH 10/12] Refactor minify css function

---
 .../font-stylesheet-gathering-plugin.ts       | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index 161b9c35f0e91..c3964989acff3 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -16,20 +16,16 @@ import {
   OPTIMIZED_FONT_PROVIDERS,
 } from '../../../next-server/lib/constants'
 
-async function minifyCss(css: string): Promise<string> {
-  return new Promise((resolve) =>
-    postcss([
-      minifier({
-        excludeAll: true,
-        discardComments: true,
-        normalizeWhitespace: { exclude: false },
-      }),
-    ])
-      .process(css, { from: undefined })
-      .then((res) => {
-        resolve(res.css)
-      })
-  )
+function minifyCss(css: string): Promise<string> {
+  return postcss([
+    minifier({
+      excludeAll: true,
+      discardComments: true,
+      normalizeWhitespace: { exclude: false },
+    }),
+  ])
+    .process(css, { from: undefined })
+    .then((res) => res.css)
 }
 
 export class FontStylesheetGatheringPlugin {

From ff04f6848d2bca6523b3796bfab88e964b84f7b8 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Thu, 1 Apr 2021 09:26:14 -0700
Subject: [PATCH 11/12] Fix lint

---
 packages/next/next-server/server/font-utils.ts | 2 +-
 packages/next/pages/_document.tsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/next-server/server/font-utils.ts b/packages/next/next-server/server/font-utils.ts
index 31dad54bb5966..5861567425133 100644
--- a/packages/next/next-server/server/font-utils.ts
+++ b/packages/next/next-server/server/font-utils.ts
@@ -29,7 +29,7 @@ function getFontForUA(url: string, UA: string): Promise<String> {
           })
         }
       )
-      .on('error', (e) => {
+      .on('error', (e: Error) => {
         reject(e)
       })
   })
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 888601fe3d31f..20e521506cc4e 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -398,7 +398,7 @@ export class Head extends Component<
       })
       head = cssPreloads.concat(otherHeadElements)
     }
-    let children = this.props.children.filter(Boolean)
+    let children = React.Children.toArray(this.props.children).filter(Boolean)
     // show a warning if Head contains <title> (only in development)
     if (process.env.NODE_ENV !== 'production') {
       children = React.Children.map(children, (child: any) => {

From 7dfea0c5685d1ecede11d51f17e726d793bb62c4 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Thu, 1 Apr 2021 11:57:00 -0700
Subject: [PATCH 12/12] Using log module to wrap message

---
 packages/next/next-server/server/font-utils.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/next/next-server/server/font-utils.ts b/packages/next/next-server/server/font-utils.ts
index 5861567425133..4d4b25dbe9425 100644
--- a/packages/next/next-server/server/font-utils.ts
+++ b/packages/next/next-server/server/font-utils.ts
@@ -1,3 +1,4 @@
+import * as Log from '../../build/output/log'
 const https = require('https')
 
 const CHROME_UA =
@@ -47,8 +48,8 @@ export async function getFontDefinitionFromNetwork(
     result += await getFontForUA(url, IE_UA)
     result += await getFontForUA(url, CHROME_UA)
   } catch (e) {
-    console.warn(
-      `Unable to optimize font for ${url}. Failed to download the stylesheet.`
+    Log.warn(
+      `Failed to download the stylesheet for ${url}. Skipped optimizing this font.`
     )
     return ''
   }