Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Conversation

ygkn
Copy link
Contributor

@ygkn ygkn commented Jun 18, 2023

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:
image

After:
image

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
Copy link
Contributor

valentinpalkovic commented Jun 19, 2023

@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 :)

@valentinpalkovic valentinpalkovic self-assigned this Jun 19, 2023
@valentinpalkovic valentinpalkovic added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jun 19, 2023
@valentinpalkovic valentinpalkovic merged commit 0d7c3a8 into storybookjs:next Jun 19, 2023
JReinhold pushed a commit that referenced this pull request Jun 19, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
@shilman shilman changed the title NextJS: fix not loading fonts has 3 (or more) words name NextJS: Fix fonts not loading with 3+ words in name Jun 19, 2023
JReinhold pushed a commit that referenced this pull request Jun 19, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 19, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 20, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
@ygkn ygkn deleted the next-font-fix-not-loading-fonts-has-3-words-name branch June 20, 2023 04:25
JReinhold pushed a commit that referenced this pull request Jun 20, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 20, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 20, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 20, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 21, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
JReinhold pushed a commit that referenced this pull request Jun 22, 2023
…as-3-words-name

NextJS: fix not loading fonts has 3 (or more) words name
(cherry picked from commit 0d7c3a8)
@github-actions github-actions bot mentioned this pull request Jun 22, 2023
18 tasks
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label Jun 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: @storybook/nextjs not loading google fonts with 3 words in name
3 participants