[Bug]: Cannot see component which use 'inter'

[ggsno]

Describe the bug

When I create Next.js app by run 'yarn create next-app', there are 'inter' from '@next/font/google' in '/pages/index.tsx'

The problem is I cannot see component on storybook when component use 'inter'

Here are snapshots

When 'inter' is -> no see

After removing 'inter' -> see

To Reproduce

No response

System

Environment Info:

  System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
  Binaries:
    Node: 16.14.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\node_modules\.bin\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
  npmPackages:
    @storybook/addon-actions: ^6.5.15 => 6.5.15
    @storybook/addon-essentials: ^6.5.15 => 6.5.15
    @storybook/addon-interactions: ^6.5.15 => 6.5.15
    @storybook/addon-links: ^6.5.15 => 6.5.15
    @storybook/builder-webpack5: ^6.5.15 => 6.5.15
    @storybook/manager-webpack5: ^6.5.15 => 6.5.15
    @storybook/react: ^6.5.15 => 6.5.15
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

No response

[shilman]

Please try upgrading to the latest prerelease which supports @next/font

Migration guide: https://storybook.js.org/migration-guides/7.0