Correctly handle @next/font/google fonts without any preloadable subsets (#44809)

packages/font/src/google/utils.ts

@@ -29,6 +29,8 @@ export function validateData(
     weight,
     style,
     preload = true,
+    // If preload is disabled set display to 'swap' by default.
+    // If display is 'optional' and we don't preload, we will never fetch the font in time to display it, not even in dev.
     display = preload ? 'optional' : 'swap',
     axes,
     fallback,
@@ -48,13 +50,17 @@ export function validateData(
     nextFontError(`Unknown font \`${fontFamily}\``)
   }
 
+  const availableSubsets = fontFamilyData.subsets
+  if (availableSubsets.length === 0) {
+    // If the font doesn't have any preloaded subsets, disable preload and set display to 'swap'
+    preload = false
+    display = 'swap'
+  } else {
     if (preload && !callSubsets && !config?.subsets) {
       nextFontError(
         `Missing selected subsets for font \`${fontFamily}\`. Please specify subsets in the function call or in your \`next.config.js\`. Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets`
       )
     }
-
-  const availableSubsets = fontFamilyData.subsets
     subsets.forEach((subset: string) => {
       if (!availableSubsets.includes(subset)) {
         nextFontError(
@@ -64,6 +70,7 @@ export function validateData(
         )
       }
     })
+  }
 
   const fontWeights = fontFamilyData.weights
   const fontStyles = fontFamilyData.styles

test/e2e/next-font/app/pages/font-without-preloadable-subsets.js

@@ -0,0 +1,7 @@
+import { Single_Day } from '@next/font/google'
+
+const singleDay = Single_Day({ weight: '400' })
+
+export default function FontWithoutPreloadableSubsets() {
+  return <p className={singleDay.className}>{JSON.stringify(singleDay)}</p>
+}

test/e2e/next-font/google-font-mocked-responses.js

@@ -988,4 +988,13 @@ body {
   --google-font-color-nabla:colrv1;
 }
   `,
+  'https://fonts.googleapis.com/css2?family=Single+Day:wght@400&display=swap': `
+  @font-face {
+    font-family: 'Single Day';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/singleday/v15/LYjHdGDjlEgoAcF95EI5jV8FVtffGoa4-V3jzT3lMfZhY8uIhf9daTM.0.woff2) format('woff2');
+  }
+  `,
 }

test/e2e/next-font/index.test.ts

@@ -384,6 +384,27 @@ describe('@next/font/google', () => {
         '/_next/static/media/fb68b4558e2a718e.p.woff2',
       ])
     })
+
+    test('font without preloadable subsets', async () => {
+      const html = await renderViaHTTP(
+        next.url,
+        '/font-without-preloadable-subsets'
+      )
+      const $ = cheerio.load(html)
+
+      // Preconnect
+      expect($('link[rel="preconnect"]').length).toBe(0)
+
+      // From _app
+      expect($('link[as="font"]').length).toBe(1)
+      expect($('link[as="font"]').get(0).attribs).toEqual({
+        as: 'font',
+        crossorigin: 'anonymous',
+        href: '/_next/static/media/0812efcfaefec5ea.p.woff2',
+        rel: 'preload',
+        type: 'font/woff2',
+      })
+    })
   })
 
   describe('Fallback fontfaces', () => {