Adding experimentalAdjustFallback feature to font optimization

packages/next/build/webpack-config.ts

@@ -177,7 +177,7 @@ export function getDefineEnv({
     'process.env.__NEXT_STRICT_MODE': JSON.stringify(config.reactStrictMode),
     'process.env.__NEXT_REACT_ROOT': JSON.stringify(hasReactRoot),
     'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
-      config.optimizeFonts && !dev
+      !dev && config.optimizeFonts
     ),
     'process.env.__NEXT_OPTIMIZE_CSS': JSON.stringify(
       config.experimental.optimizeCss && !dev
@@ -1779,6 +1779,7 @@ export default async function getBaseWebpackConfig(
             }
           return new FontStylesheetGatheringPlugin({
             isLikeServerless,
+            optimizeFonts: config.optimizeFonts,
           })
         })(),
       new WellKnownErrorsPlugin(),

packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts

@@ -284,7 +284,7 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
       const isPreviewMode = previewData !== false
 
       if (process.env.__NEXT_OPTIMIZE_FONTS) {
-        renderOpts.optimizeFonts = true
+        renderOpts.optimizeFonts = process.env.__NEXT_OPTIMIZE_FONTS
         /**
          * __webpack_require__.__NEXT_FONT_MANIFEST__ is added by
          * font-stylesheet-gathering-plugin

packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts

@@ -5,7 +5,9 @@ import {
 } from 'next/dist/compiled/webpack/webpack'
 import {
   getFontDefinitionFromNetwork,
+  getFontOverrideCss,
   FontManifest,
+  FontConfig,
 } from '../../../server/font-utils'
 import postcss from 'postcss'
 import minifier from 'next/dist/compiled/cssnano-simple'
@@ -52,9 +54,17 @@ export class FontStylesheetGatheringPlugin {
   gatheredStylesheets: Array<string> = []
   manifestContent: FontManifest = []
   isLikeServerless: boolean
+  optimizeFonts: FontConfig
 
-  constructor({ isLikeServerless }: { isLikeServerless: boolean }) {
+  constructor({
+    isLikeServerless,
+    optimizeFonts,
+  }: {
+    isLikeServerless: boolean
+    optimizeFonts: FontConfig
+  }) {
     this.isLikeServerless = isLikeServerless
+    this.optimizeFonts = optimizeFonts
   }
 
   private parserHandler = (
@@ -186,7 +196,9 @@ export class FontStylesheetGatheringPlugin {
                   this.manifestContent
                 )};
             // Enable feature:
-            process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true);`
+            process.env.__NEXT_OPTIMIZE_FONTS = ${JSON.stringify(
+              this.optimizeFonts
+            )};`
           }
         )
       }
@@ -212,7 +224,11 @@ export class FontStylesheetGatheringPlugin {
 
           this.manifestContent = []
           for (let promiseIndex in fontDefinitionPromises) {
-            const css = await fontDefinitionPromises[promiseIndex]
+            let css = await fontDefinitionPromises[promiseIndex]
+
+            if (this.optimizeFonts?.experimentalAdjustFallbacks) {
+              css += getFontOverrideCss(fontStylesheets[promiseIndex], css)
+            }
 
             if (css) {
               try {

packages/next/export/worker.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react'
-import type { FontManifest } from '../server/font-utils'
+import type { FontManifest, FontConfig } from '../server/font-utils'
 import type { GetStaticProps } from '../types'
 import type { IncomingMessage, ServerResponse } from 'http'
 import type { DomainLocale, NextConfigComplete } from '../server/config-shared'
@@ -59,7 +59,7 @@ interface ExportPageInput {
   serverRuntimeConfig: { [key: string]: any }
   subFolders?: boolean
   serverless: boolean
-  optimizeFonts: boolean
+  optimizeFonts: FontConfig
   optimizeCss: any
   disableOptimizedLoading: any
   parentSpanId: any
@@ -82,7 +82,7 @@ interface RenderOpts {
   ampPath?: string
   ampValidatorPath?: string
   ampSkipValidation?: boolean
-  optimizeFonts?: boolean
+  optimizeFonts?: FontConfig
   disableOptimizedLoading?: boolean
   optimizeCss?: any
   fontManifest?: FontManifest
@@ -340,9 +340,10 @@ export default async function exportPage({
               optimizeCss,
               disableOptimizedLoading,
               distDir,
-              fontManifest: optimizeFonts
-                ? requireFontManifest(distDir, serverless)
-                : null,
+              fontManifest:
+                optimizeFonts && optimizeFonts.inlineFonts
+                  ? requireFontManifest(distDir, serverless)
+                  : null,
               locale: locale!,
               locales: renderOpts.locales!,
             },
@@ -401,8 +402,8 @@ export default async function exportPage({
            * `process.env.__NEXT_OPTIMIZE_FONTS`.
            * TODO(prateekbh@): Remove this when experimental.optimizeFonts are being cleaned up.
            */
-          if (optimizeFonts) {
-            process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true)
+          if (optimizeFonts && optimizeFonts.inlineFonts) {
+            process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(optimizeFonts)
           }
           if (optimizeCss) {
             process.env.__NEXT_OPTIMIZE_CSS = JSON.stringify(true)
@@ -415,9 +416,10 @@ export default async function exportPage({
             optimizeFonts,
             optimizeCss,
             disableOptimizedLoading,
-            fontManifest: optimizeFonts
-              ? requireFontManifest(distDir, serverless)
-              : null,
+            fontManifest:
+              optimizeFonts && optimizeFonts.inlineFonts
+                ? requireFontManifest(distDir, serverless)
+                : null,
             locale: locale as string,
           }
           renderResult = await renderMethod(

packages/next/pages/_document.tsx

@@ -420,7 +420,7 @@ export class Head extends Component<HeadProps> {
       )
     })
 
-    if (process.env.NODE_ENV !== 'development' && optimizeFonts) {
+    if (process.env.NODE_ENV !== 'development' && optimizeFonts?.inlineFonts) {
       cssLinkElements = this.makeStylesheetInert(
         cssLinkElements
       ) as ReactElement[]
@@ -657,7 +657,7 @@ export class Head extends Component<HeadProps> {
 
     if (
       process.env.NODE_ENV !== 'development' &&
-      optimizeFonts &&
+      optimizeFonts?.inlineFonts &&
       !(process.env.NEXT_RUNTIME !== 'edge' && inAmpMode)
     ) {
       children = this.makeStylesheetInert(children)
@@ -754,7 +754,7 @@ export class Head extends Component<HeadProps> {
         />
 
         {children}
-        {optimizeFonts && <meta name="next-font-preconnect" />}
+        {optimizeFonts?.inlineFonts && <meta name="next-font-preconnect" />}
 
         {process.env.NEXT_RUNTIME !== 'edge' && inAmpMode && (
           <>

packages/next/server/base-server.ts

@@ -2,7 +2,7 @@ import type { __ApiPreviewProps } from './api-utils'
 import type { CustomRoutes } from '../lib/load-custom-routes'
 import type { DomainLocale } from './config'
 import type { DynamicRoutes, PageChecker, Route } from './router'
-import type { FontManifest } from './font-utils'
+import type { FontManifest, FontConfig } from './font-utils'
 import type { LoadComponentsReturnType } from './load-components'
 import type { RouteMatch } from '../shared/lib/router/utils/route-matcher'
 import type { MiddlewareRouteMatch } from '../shared/lib/router/utils/middleware-route-matcher'
@@ -201,7 +201,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     customServer?: boolean
     ampOptimizerConfig?: { [key: string]: any }
     basePath: string
-    optimizeFonts: boolean
+    optimizeFonts: FontConfig
     images: ImageConfigComplete
     fontManifest?: FontManifest
     disableOptimizedLoading?: boolean
@@ -381,9 +381,11 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.basePath,
       images: this.nextConfig.images,
-      optimizeFonts: !!this.nextConfig.optimizeFonts && !dev,
+      optimizeFonts: this.nextConfig.optimizeFonts,
       fontManifest:
-        this.nextConfig.optimizeFonts && !dev
+        this.nextConfig.optimizeFonts &&
+        this.nextConfig.optimizeFonts.inlineFonts &&
+        !dev
           ? this.getFontManifest()
           : undefined,
       optimizeCss: this.nextConfig.experimental.optimizeCss,
@@ -1194,6 +1196,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
           locale,
           locales,
           defaultLocale,
+          optimizeFonts: this.renderOpts.optimizeFonts,
           optimizeCss: this.renderOpts.optimizeCss,
           nextScriptWorkers: this.renderOpts.nextScriptWorkers,
           distDir: this.distDir,

packages/next/server/config-schema.ts

@@ -563,7 +563,22 @@ const configSchema = {
       type: 'object',
     },
     optimizeFonts: {
-      type: 'boolean',
+      oneOf: [
+        {
+          type: 'boolean',
+        },
+        {
+          properties: {
+            inlineFonts: {
+              type: 'boolean',
+            },
+            experimentalAdjustFallbacks: {
+              type: 'boolean',
+            },
+          },
+          type: 'object',
+        },
+      ] as any,
     },
     output: {
       // automatic typing doesn't like enum

packages/next/server/config-shared.ts

@@ -355,11 +355,14 @@ export interface NextConfig extends Record<string, any> {
   /**
    * By default, Next.js will automatically inline font CSS at build time
    *
-   * @default true
+   * @default { inlineFonts: true }
    * @since version 10.2
    * @see [Font Optimization](https://nextjs.org/docs/basic-features/font-optimization)
    */
-  optimizeFonts?: boolean
+  optimizeFonts?: {
+    inlineFonts: boolean
+    experimentalAdjustFallbacks?: boolean
+  }
 
   /**
    * The Next.js runtime is Strict Mode-compliant.
@@ -523,7 +526,10 @@ export const defaultConfig: NextConfig = {
   trailingSlash: false,
   i18n: null,
   productionBrowserSourceMaps: false,
-  optimizeFonts: true,
+  optimizeFonts: {
+    inlineFonts: true,
+    experimentalAdjustFallbacks: false,
+  },
   webpack5: undefined,
   excludeDefaultMomentLocales: true,
   serverRuntimeConfig: {},

packages/next/server/font-utils.ts

@@ -1,5 +1,10 @@
 import * as Log from '../build/output/log'
-import { GOOGLE_FONT_PROVIDER } from '../shared/lib/constants'
+import {
+  GOOGLE_FONT_PROVIDER,
+  DEFAULT_SERIF_FONT,
+  DEFAULT_SANS_SERIF_FONT,
+} from '../shared/lib/constants'
+const googleFontsMetrics = require('./google-font-metrics.json')
 const https = require('https')
 
 const CHROME_UA =
@@ -11,6 +16,11 @@ export type FontManifest = Array<{
   content: string
 }>
 
+export type FontConfig = {
+  experimentalAdjustFallbacks?: boolean
+  inlineFonts: boolean
+}
+
 function isGoogleFont(url: string): boolean {
   return url.startsWith(GOOGLE_FONT_PROVIDER)
 }
@@ -77,3 +87,59 @@ export function getFontDefinitionFromManifest(
     })?.content || ''
   )
 }
+
+function parseGoogleFontName(css: string): Array<string> {
+  const regex = /font-family: ([^;]*)/g
+  const matches = css.matchAll(regex)
+  const fontNames = new Set<string>()
+
+  for (let font of matches) {
+    const fontFamily = font[1].replace(/^['"]|['"]$/g, '')
+    fontNames.add(fontFamily)
+  }
+
+  return [...fontNames]
+}
+
+function calculateOverrideCSS(font: string, fontMetrics: any) {
+  const fontName = font.toLowerCase().trim().replace(/ /g, '-')
+  const fontKey = font.toLowerCase().trim().replace(/ /g, '')
+  const { category, ascentOverride, descentOverride, lineGapOverride } =
+    fontMetrics[fontKey]
+  const fallbackFont =
+    category === 'serif' ? DEFAULT_SERIF_FONT : DEFAULT_SANS_SERIF_FONT
+  const ascent = (ascentOverride * 100).toFixed(2)
+  const descent = (descentOverride * 100).toFixed(2)
+  const lineGap = (lineGapOverride * 100).toFixed(2)
+
+  return `
+    @font-face {
+      font-family: "${fontName}-fallback";
+      ascent-override: ${ascent}%;
+      descent-override: ${descent}%;
+      line-gap-override: ${lineGap}%;
+      src: local("${fallbackFont}");
+    }
+  `
+}
+
+export function getFontOverrideCss(url: string, css: string) {
+  if (!isGoogleFont(url)) {
+    return ''
+  }
+
+  try {
+    const fontNames = parseGoogleFontName(css)
+    const fontMetrics = googleFontsMetrics
+
+    const fontCss = fontNames.reduce((cssStr, fontName) => {
+      cssStr += calculateOverrideCSS(fontName, fontMetrics)
+      return cssStr
+    }, '')
+
+    return fontCss
+  } catch (e) {
+    console.log('Error getting font override values - ', e)
+    return ''
+  }
+}