NextJS: Fix fonts not loading with 3+ words in name

[ygkn]

Closes #22248

What I did

This PR fixes a bug not loading fonts has 3 (or more) words name.

It caused by using replace instead of replaceAll when get className from font family name.

Before:

After:

How to test

1. Run a sandbox for nextjs/default-ts template.
2. Create NextFont.tsx and NextFontTest.stories.tsx as below in same any directory.
3. Access story created.

// NextFont.tsx
import { Petit_Formal_Script } from 'next/font/google';
import React from 'react';

const font = Petit_Formal_Script({
  weight: '400',
  variable: '--font-script',
  subsets: ['latin'],
});

export const NextFontTest: React.FC = () => {
  return (
    <div>
      <section>
        <h2>
          Apply font styles with{' '}
          <a
            target="_blank"
            href="https://nextjs.org/docs/pages/api-reference/components/font#classname"
            rel="noreferrer noopener"
          >
            <code>className</code> method
          </a>
        </h2>
        <p className={font.className}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua.
        </p>
      </section>
      <section>
        <h2>
          Apply font styles with{' '}
          <a
            target="_blank"
            href="https://nextjs.org/docs/pages/api-reference/components/font#css-variables"
            rel="noreferrer noopener"
          >
            CSS variable method
          </a>
        </h2>
        <p className={font.variable} style={{ fontFamily: 'var(--font-script)' }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua.
        </p>
      </section>
    </div>
  );
};

// NextFontTest.stories.tsx
import { Meta, StoryObj } from '@storybook/react';
import { NextFontTest } from './NextFontTest';

export default { component: NextFontTest } satisfies Meta<typeof NextFontTest>;

type Story = StoryObj<typeof NextFontTest>;

export const Default: Story = {};

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[valentinpalkovic]

@ygkn Thank you so much for your code contribution! The change looks reasonable to me. Let's merge it as soon as the CI turns green :)