> **Version 8** — **React** / **TypeScript**
> Also available:
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 10.3 (latest) (`/docs/api/main-config/main-config-manager-head.md`), Version 9 (`/docs/9/api/main-config/main-config-manager-head.md`)

# managerHead

Parent: [main.js|ts configuration](./main-config.mdx)

Type: `(head: string) => string`

Programmatically adjust the manager's `<head>` of your Storybook. For example, load a custom font or add a script. Most often used by [addon authors](../../addons/writing-presets.mdx#ui-configuration).

  If you don't need to programmatically adjust the manager head, you can add scripts and styles to `manager-head.html` instead.
  

For example, you can conditionally add scripts or styles, depending on the environment:

```ts
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  managerHead: (head) => `
    ${head}
    <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
  `,
};

export default config;
```