故事书中未加载谷歌字体

Question

我已经关注了 stackoverflow 和 github 上的文档和其他答案，并阅读了故事书文档。

我有 React 故事书，想要导入 Manrope 字体。按照说明，我在 .storybook 文件夹中创建了一个 Preview-head.html 文件，代码如下。

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800" />
<!-- Or you can load custom head-tag JavaScript: -->
<script src="https://use.typekit.net/xxxyyy.js"></script>
<script>try{ Typekit.load(); } catch(e){ }</script>

但是，当我在样式组件中使用它时，它不会被拾取。

export const Initials = styled.div`
  color: ${color.midnightBlue};
  font-family: Manrope;
  font-size: 24px;
  width: 100%;
  padding: 0px 33px;
  font-weight: ${typography.weight.extrabold}; //800
`;

我是否缺少一些配置？我需要添加一些加载程序吗？

---

作为参考，这是我的 Preview.js 文件的样子：

/** @type { import('@storybook/react').Preview } */
const preview = {
decorators: [
  (Story) => (
    <>
      <Story />
    </>
  ),
],
 parameters: {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
 },
};

export default preview;

Answer 1

缺少 rel="stylesheet"

<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800" rel="stylesheet"/>