Font optimization

packages/next/build/index.ts

@@ -412,7 +412,7 @@ export default async function build(
           BUILD_MANIFEST,
           PRERENDER_MANIFEST,
           REACT_LOADABLE_MANIFEST,
-          config.experimental.optimizeFonts
+          config.optimizeFonts
             ? path.join(
                 isLikeServerless ? SERVERLESS_DIRECTORY : SERVER_DIRECTORY,
                 FONT_MANIFEST

packages/next/build/webpack-config.ts

@@ -1028,7 +1028,7 @@ export default async function getBaseWebpackConfig(
           config.experimental.reactMode
         ),
         'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
-          config.experimental.optimizeFonts && !dev
+          config.optimizeFonts && !dev
         ),
         'process.env.__NEXT_OPTIMIZE_IMAGES': JSON.stringify(
           config.experimental.optimizeImages
@@ -1141,7 +1141,7 @@ export default async function getBaseWebpackConfig(
           distDir,
         }),
       new ProfilingPlugin(),
-      config.experimental.optimizeFonts &&
+      config.optimizeFonts &&
         !dev &&
         isServer &&
         (function () {
@@ -1241,7 +1241,7 @@ export default async function getBaseWebpackConfig(
       plugins: config.experimental.plugins,
       reactStrictMode: config.reactStrictMode,
       reactMode: config.experimental.reactMode,
-      optimizeFonts: config.experimental.optimizeFonts,
+      optimizeFonts: config.optimizeFonts,
       optimizeImages: config.experimental.optimizeImages,
       optimizeCss: config.experimental.optimizeCss,
       scrollRestoration: config.experimental.scrollRestoration,

packages/next/export/index.ts

@@ -534,7 +534,7 @@ export default async function exportApp(
             subFolders,
             buildExport: options.buildExport,
             serverless: isTargetLikeServerless(nextConfig.target),
-            optimizeFonts: nextConfig.experimental.optimizeFonts,
+            optimizeFonts: nextConfig.optimizeFonts,
             optimizeImages: nextConfig.experimental.optimizeImages,
             optimizeCss: nextConfig.experimental.optimizeCss,
             parentSpanId: pageExportSpan.id,

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,

packages/next/next-server/server/next-server.ts

@@ -205,9 +205,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,
+      optimizeFonts: this.nextConfig.optimizeFonts && !dev,
       fontManifest:
-        this.nextConfig.experimental.optimizeFonts && !dev
+        this.nextConfig.optimizeFonts && !dev
           ? requireFontManifest(this.distDir, this._isLikeServerless)
           : null,
       optimizeImages: this.nextConfig.experimental.optimizeImages,
@@ -272,9 +272,9 @@ 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)

test/integration/build-output/test/index.test.js

@@ -98,13 +98,13 @@ describe('Build Output', () => {
       expect(parseFloat(indexFirstLoad)).toBeCloseTo(64.6, 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.8, 0)
       expect(err404FirstLoad.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(sharedByAll)).toBeCloseTo(64.3, 1)
+      expect(parseFloat(sharedByAll)).toBeCloseTo(64.4, 1)
       expect(sharedByAll.endsWith('kB')).toBe(true)
 
       if (_appSize.endsWith('kB')) {

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 () => {
@@ -117,11 +126,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 +145,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 +162,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)