Font Optimization

Copyconst nextFontGoogleFontLoader: FontLoader = async ({
  functionName,
  data,
  emitFontFile,
  isDev,
  isServer,
}) => {
  const {
    fontFamily,
    weights,
    styles,
    display,
    preload,
    selectedVariableAxes,
    fallback,
    adjustFontFallback,
    variable,
    subsets,
  } = validateGoogleFontFunctionCall(functionName, data[0])
 
  // Validate and get the font axes required to generated the URL
  const fontAxes = getFontAxes(
    fontFamily,
    weights,
    styles,
    selectedVariableAxes
  )
 
  // Generate the Google Fonts URL from the font family, axes and display value
  const url = getGoogleFontsUrl(fontFamily, fontAxes, display)
 
  // Get precalculated fallback font metrics, used to generate the fallback font CSS
  const adjustFontFallbackMetrics: AdjustFontFallback | undefined =
    adjustFontFallback ? getFallbackFontOverrideMetrics(fontFamily) : undefined
 
  const result = {
    fallbackFonts: fallback,
    weight:
      weights.length === 1 && weights[0] !== 'variable'
        ? weights[0]
        : undefined,
    style: styles.length === 1 ? styles[0] : undefined,
    variable,
    adjustFontFallback: adjustFontFallbackMetrics,
  }
 
  try {
    /**
     * Hacky way to make sure the fetch is only done once.
     * Otherwise both the client and server compiler would fetch the CSS.
     * The reason we need to return the actual CSS from both the server and client is because a hash is generated based on the CSS content.
     */
    const hasCachedCSS = cssCache.has(url)
    // Fetch CSS from Google Fonts or get it from the cache
    let fontFaceDeclarations = hasCachedCSS
      ? cssCache.get(url)
      : await fetchCSSFromGoogleFonts(url, fontFamily, isDev).catch((err) => {
          console.error(err)
          return null
        })
    if (!hasCachedCSS) {
      cssCache.set(url, fontFaceDeclarations ?? null)
    } else {
      cssCache.delete(url)
    }
    if (fontFaceDeclarations == null) {
      nextFontError(`Failed to fetch \`${fontFamily}\` from Google Fonts.`)
    }
 

Copyimport { nextFontError } from '../next-font-error'
import { fetchResource } from './fetch-resource'
import { retry } from './retry'
 
/**
 * Fetches the CSS containing the @font-face declarations from Google Fonts.
 * The fetch has a user agent header with a modern browser to ensure we'll get .woff2 files.
 *
 * The env variable NEXT_FONT_GOOGLE_MOCKED_RESPONSES may be set containing a path to mocked data.
 * It's used to define mocked data to avoid hitting the Google Fonts API during tests.
 */
export async function fetchCSSFromGoogleFonts(
  url: string,
  fontFamily: string,
  isDev: boolean
): Promise<string> {
  if (process.env.NEXT_FONT_GOOGLE_MOCKED_RESPONSES) {
    const mockFile = require(process.env.NEXT_FONT_GOOGLE_MOCKED_RESPONSES)
    const mockedResponse = mockFile[url]
    if (!mockedResponse) {
      nextFontError('Missing mocked response for URL: ' + url)
    }
    return mockedResponse
  }
 
  const buffer = await retry(async () => {
    return fetchResource(
      url,
      isDev,
      `Failed to fetch font \`${fontFamily}\`: ${url}\n` +
        `Please check your network connection.`
    )
  }, 3)
 
  return buffer.toString('utf8')
}

Copyimport fs from 'node:fs'
import { retry } from './retry'
import { fetchResource } from './fetch-resource'
 
/**
 * Fetches a font file and returns its contents as a Buffer.
 * If NEXT_FONT_GOOGLE_MOCKED_RESPONSES is set, we handle mock data logic.
 */
export async function fetchFontFile(url: string, isDev: boolean) {
  if (process.env.NEXT_FONT_GOOGLE_MOCKED_RESPONSES) {
    if (url.startsWith('/')) {
      return fs.readFileSync(url)
    }
    return Buffer.from(url)
  }
 
  return await retry(async () => {
    return fetchResource(
      url,
      isDev,
      `Failed to fetch font file from \`${url}\`.`
    )
  }, 3)
}

Copy// CSS Variables may be set on a body tag, ignore them to keep the CSS module pure
fontFaceDeclarations = fontFaceDeclarations.split('body {', 1)[0]
 
// Find font files to download, provide the array of subsets we want to preload if preloading is enabled
const fontFiles = findFontFilesInCss(
  fontFaceDeclarations,
  preload ? subsets : undefined
)
 
// Download the font files extracted from the CSS
const downloadedFiles = await Promise.all(
  fontFiles.map(async ({ googleFontFileUrl, preloadFontFile }) => {
    const hasCachedFont = fontCache.has(googleFontFileUrl)
    // Download the font file or get it from cache
    const fontFileBuffer = hasCachedFont
      ? fontCache.get(googleFontFileUrl)
      : await fetchFontFile(googleFontFileUrl, isDev).catch((err) => {
          console.error(err)
          return null
        })
    if (!hasCachedFont) {
      fontCache.set(googleFontFileUrl, fontFileBuffer ?? null)
    } else {
      fontCache.delete(googleFontFileUrl)
    }
    if (fontFileBuffer == null) {
      nextFontError(`Failed to fetch \`${fontFamily}\` from Google Fonts.`)
    }
 
    const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(googleFontFileUrl)![1]
    // Emit font file to .next/static/media
    const selfHostedFileUrl = emitFontFile(
      fontFileBuffer,
      ext,
      preloadFontFile,
      !!adjustFontFallbackMetrics
    )
 
    return {
      googleFontFileUrl,
      selfHostedFileUrl,
    }
  })
)
 
/**
 * Replace the @font-face sources with the self-hosted files we just downloaded to .next/static/media
 *
 * E.g.
 * @font-face {
 *   font-family: 'Inter';
 *   src: url(https://fonts.gstatic.com/...) -> url(/_next/static/media/_.woff2)
 * }
 */
let updatedCssResponse = fontFaceDeclarations
for (const { googleFontFileUrl, selfHostedFileUrl } of downloadedFiles) {
  updatedCssResponse = updatedCssResponse.replace(
    new RegExp(escapeStringRegexp(googleFontFileUrl), 'g'),
    selfHostedFileUrl
  )
}
 
return {
  ...result,
  css: updatedCssResponse,
}

Copyfunction formatName(str: string): string {
  return str
    .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
      return index === 0 ? word.toLowerCase() : word.toUpperCase()
    })
    .replace(/\s+/g, '')
}
 
function formatOverrideValue(val: number) {
  return Math.abs(val * 100).toFixed(2)
}

Copyexport type AdjustFontFallback = {
  fallbackFont: string
  ascentOverride?: string
  descentOverride?: string
  lineGapOverride?: string
  sizeAdjust?: string
}

Copyconst DEFAULT_SANS_SERIF_FONT = {
  name: 'Arial',
  azAvgWidth: 934.5116279069767,
  unitsPerEm: 2048,
}
const DEFAULT_SERIF_FONT = {
  name: 'Times New Roman',
  azAvgWidth: 854.3953488372093,
  unitsPerEm: 2048,
}

CopyOnce(root: any) {
  let fontFamily: string | undefined
 
  const normalizeFamily = (family: string) => {
    return family.replace(/['"]/g, '')
  }
 
  const formatFamily = (family: string) => {
    return `'${family}'`
  }
 
  // Hash font-family names
  for (const node of root.nodes) {
    if (node.type === 'atrule' && node.name === 'font-face') {
      const familyNode = node.nodes.find(
        (decl: Declaration) => decl.prop === 'font-family'
      )
      if (!familyNode) {
        continue
      }
 
      if (!fontFamily) {
        fontFamily = normalizeFamily(familyNode.value)
      }
 
      familyNode.value = formatFamily(fontFamily)
    }
  }
 
  if (!fontFamily) {
    throw new Error("Font loaders must return one or more @font-face's")
  }

Copy// Add fallback @font-face with the provided override values
let adjustFontFallbackFamily: string | undefined
if (adjustFontFallback) {
  adjustFontFallbackFamily = formatFamily(`${fontFamily} Fallback`)
  const fallbackFontFace = postcss.atRule({ name: 'font-face' })
  const {
    fallbackFont,
    ascentOverride,
    descentOverride,
    lineGapOverride,
    sizeAdjust,
  } = adjustFontFallback
  fallbackFontFace.nodes = [
    new postcss.Declaration({
      prop: 'font-family',
      value: adjustFontFallbackFamily,
    }),
    new postcss.Declaration({
      prop: 'src',
      value: `local("${fallbackFont}")`,
    }),
    ...(ascentOverride
      ? [
          new postcss.Declaration({
            prop: 'ascent-override',
            value: ascentOverride,
          }),
        ]
      : []),
    ...(descentOverride
      ? [
          new postcss.Declaration({
            prop: 'descent-override',
            value: descentOverride,
          }),
        ]
      : []),
    ...(lineGapOverride
      ? [
          new postcss.Declaration({
            prop: 'line-gap-override',
            value: lineGapOverride,
          }),
        ]
      : []),
    ...(sizeAdjust
      ? [
          new postcss.Declaration({
            prop: 'size-adjust',
            value: sizeAdjust,
          }),
        ]
      : []),
  ]
  root.nodes.push(fallbackFontFace)
}

Copy/**
 * The NextFontManifestPlugin collects all font files emitted by next-font-loader and creates a manifest file.
 * The manifest file is used in the Next.js render functions (_document.tsx for pages/ and app-render for app/) to add preload tags for the font files.
 * We only want to att preload fonts that are used by the current route.
 *
 * For pages/ the plugin finds the fonts imported in the entrypoint chunks and creates a map:
 * { [route]: fontFile[] }
 * When rendering the app in _document.tsx, it gets the font files to preload: manifest.pages[currentRouteBeingRendered].
 *
 * For app/, the manifest is a bit different.
 * Instead of creating a map of route to font files, it creates a map of the webpack module request to font files.
 * { [webpackModuleRequest]: fontFile[]]}
 * When creating the component tree in app-render it looks for font files to preload: manifest.app[moduleBeingRendered]
 */

Copyconst FONT_PREFIX = '/__nextjs_font/'
 
const VALID_FONTS = [
  'geist-latin-ext.woff2',
  'geist-mono-latin-ext.woff2',
  'geist-latin.woff2',
  'geist-mono-latin.woff2',
]
 
const FONT_HEADERS = {
  'Content-Type': 'font/woff2',
  'Cache-Control': 'public, max-age=31536000, immutable',
} as const