Add additional font-loader spans for tracing (#50889)

## What?

Adds additional spans for running postcss and fontloader in next-font-loader.

packages/next/src/build/webpack/loaders/next-font-loader/index.ts

@@ -96,22 +96,24 @@ export default async function nextFontLoader(this: any) {
       // The font loader function emits font files and returns @font-faces and fallback font metrics
       const fontLoader: FontLoader = require(fontLoaderPath).default
       let { css, fallbackFonts, adjustFontFallback, weight, style, variable } =
-        await fontLoader({
-          functionName,
-          variableName,
-          data,
-          emitFontFile,
-          resolve: (src: string) =>
-            promisify(this.resolve)(
-              path.dirname(
-                path.join(this.rootContext, relativeFilePathFromRoot)
+        await nextFontLoaderSpan.traceChild('font-loader').traceAsyncFn(() =>
+          fontLoader({
+            functionName,
+            variableName,
+            data,
+            emitFontFile,
+            resolve: (src: string) =>
+              promisify(this.resolve)(
+                path.dirname(
+                  path.join(this.rootContext, relativeFilePathFromRoot)
+                ),
+                src.startsWith('.') ? src : `./${src}`
               ),
-              src.startsWith('.') ? src : `./${src}`
-            ),
-          isDev,
-          isServer,
-          loaderContext: this,
-        })
+            isDev,
+            isServer,
+            loaderContext: this,
+          })
+        )
 
       const { postcss } = await getPostcss()
 
@@ -127,19 +129,23 @@ export default async function nextFontLoader(this: any) {
       )
 
       // Add CSS classes, exports and make the font-family locally scoped by turning it unguessable
-      const result = await postcss(
-        postcssNextFontPlugin({
-          exports,
-          fontFamilyHash,
-          fallbackFonts,
-          weight,
-          style,
-          adjustFontFallback,
-          variable,
-        })
-      ).process(css, {
-        from: undefined,
-      })
+      const result = await nextFontLoaderSpan
+        .traceChild('postcss')
+        .traceAsyncFn(() =>
+          postcss(
+            postcssNextFontPlugin({
+              exports,
+              fontFamilyHash,
+              fallbackFonts,
+              weight,
+              style,
+              adjustFontFallback,
+              variable,
+            })
+          ).process(css, {
+            from: undefined,
+          })
+        )
 
       const ast = {
         type: 'postcss',