Fix: fallback font tag repetition (#20382)

partially fixes #20341

- Makes sure that font fallback does not get repeated for every request.
- Adds a test for the same.

packages/next/next-server/lib/post-process.ts

@@ -139,7 +139,11 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
     }
     for (const key in this.fontDefinitions) {
       const url = this.fontDefinitions[key]
-      if (result.indexOf(`<style data-href="${url}">`) > -1) {
+      const fallBackLinkTag = `<link rel="stylesheet" href="${url}"/>`
+      if (
+        result.indexOf(`<style data-href="${url}">`) > -1 ||
+        result.indexOf(fallBackLinkTag) > -1
+      ) {
         // The font is already optimized and probably the response is cached
         continue
       }
@@ -148,10 +152,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
         /**
          * In case of unreachable font definitions, fallback to default link tag.
          */
-        result = result.replace(
+        result = result.replace('</head>', `${fallBackLinkTag}</head>`)
-          '</head>',
-          `<link rel="stylesheet" href="${url}"/></head>`
-        )
       } else {
         result = result.replace(
           '</head>',

test/integration/font-optimization/test/index.test.js

@@ -184,4 +184,13 @@ describe('Font optimization for unreachable font definitions.', () => {
       '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
     )
   })
+  it('should not inline multiple fallback link tag', async () => {
+    await renderViaHTTP(appPort, '/stars')
+    // second render to make sure that the page is requested more than once.
+    const html = await renderViaHTTP(appPort, '/stars')
+    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
+    expect(html).not.toContain(
+      '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Voces"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Voces"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
+    )
+  })
 })