Google font not loading in storybook

Question

I have followed the document and other answers on stackoverflow and github, as well as reading the storybook documentation.

I have react storybook and want to import Manrope font. As per the instruction I have created a preview-head.html file inside my .storybook folder and I have the code as following.

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

However, when I use it in my styled-components it doesn't get picked up.

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
`;

Am i missing some configuration? Do I need to add some loader?

---

For reference, this is what my preview.js file looks like:

/** @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

it was missing rel="stylesheet"

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