Remove inert font tag in font optimization

packages/next/client/head-manager.ts

@@ -104,14 +104,20 @@ export default function initHeadManager(): {
             // If the font tag is loaded only on client navigation
             // it won't be inlined. In this case revert to the original behavior
             h.type === 'link' &&
-            h.props['data-optimized-fonts'] &&
-            !document.querySelector(
-              `style[data-href="${h.props['data-href']}"]`
-            )
+            h.props['data-optimized-fonts']
           ) {
-            h.props.href = h.props['data-href']
-            h.props['data-href'] = undefined
+            if (
+              document.querySelector(
+                `style[data-href="${h.props['data-href']}"]`
+              )
+            ) {
+              return
+            } else {
+              h.props.href = h.props['data-href']
+              h.props['data-href'] = undefined
+            }
           }
+
           const components = tags[h.type] || []
           components.push(h)
           tags[h.type] = components

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

@@ -46,6 +46,7 @@ async function processHTML(
   }
   const root: HTMLElement = parse(html)
   let document = html
+
   // Calls the middleware, with some instrumentation and logging
   async function callMiddleWare(middleware: PostProcessMiddleware) {
     // let timer = Date.now()
@@ -135,6 +136,15 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
           `<style data-href="${url}"${nonceStr}>${fontContent}</style></head>`
         )
 
+        // Remove inert font tag
+        const escapedUrl = url
+          .replace(/&/g, '&amp;')
+          .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        const fontRegex = new RegExp(
+          `<link[^>]*data-href="${escapedUrl}"[^>]*/>`
+        )
+        result = result.replace(fontRegex, '')
+
         const provider = OPTIMIZED_FONT_PROVIDERS.find((p) =>
           url.startsWith(p.url)
         )

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

@@ -94,12 +94,11 @@ describe('Font Optimization', () => {
           const link = $(
             `link[rel="stylesheet"][data-href="${staticHeadFont}"]`
           )
-          const nonce = link.attr('nonce')
+
           const style = $(`style[data-href="${staticHeadFont}"]`)
           const styleNonce = style.attr('nonce')
 
-          expect(link).toBeDefined()
-          expect(nonce).toBe('VmVyY2Vs')
+          expect(link.length).toBe(0)
           expect(styleNonce).toBe('VmVyY2Vs')
         })
 
@@ -109,17 +108,14 @@ describe('Font Optimization', () => {
 
           const $ = cheerio.load(html)
 
-          expect($(`link[data-href="${withFont}"]`).attr().rel).toBe(
-            'stylesheet'
-          )
+          expect($(`link[data-href="${withFont}"]`).length).toBe(0)
 
           expect(html).toMatch(withFontPattern)
 
           const htmlWithoutFont = await renderViaHTTP(appPort, '/without-font')
-
           const $2 = cheerio.load(htmlWithoutFont)
 
-          expect($2(`link[data-href="${withFont}"]`).attr()).toBeUndefined()
+          expect($2(`link[data-href="${withFont}"]`).length).toBe(0)
           expect(htmlWithoutFont).not.toMatch(withFontPattern)
         })
 
@@ -129,7 +125,7 @@ describe('Font Optimization', () => {
           expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
           expect(
             $(`link[rel=stylesheet][data-href="${staticFont}"]`).length
-          ).toBe(1)
+          ).toBe(0)
           expect(html).toMatch(staticPattern)
         })
 
@@ -139,7 +135,7 @@ describe('Font Optimization', () => {
           expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
           expect(
             $(`link[rel=stylesheet][data-href="${staticHeadFont}"]`).length
-          ).toBe(1)
+          ).toBe(0)
           expect(html).toMatch(staticHeadPattern)
         })
 
@@ -149,7 +145,7 @@ describe('Font Optimization', () => {
           expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
           expect(
             $(`link[rel=stylesheet][data-href="${starsFont}"]`).length
-          ).toBe(1)
+          ).toBe(0)
           expect(html).toMatch(starsPattern)
         })