# Framework Guides [#framework-guides]

Choose a framework or tool. For package setup, see the
[installation guide](/docs/getting-started/install).

<nav className="docs-guide-directory" aria-label="Browse framework guides">
  <section className="docs-guide-section">
    <div className="docs-guide-section-header">
      ## Application frameworks [#application-frameworks]
    </div>

    <ul className="docs-guide-list" role="list">
      <li>
        <DocsLink href="/docs/guides/angular"><strong><span>Angular</span></strong><span>Import packages in an Angular app.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="https://docs.astro.build/en/guides/fonts/#using-fontsource"><strong><span>Astro</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Use Astro’s built-in font integration.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/#self-host-google-fonts-with-fontsource"><strong><span>Gatsby</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Self-host fonts in Gatsby.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="https://laravel.com/docs/13.x/vite#font-providers"><strong><span>Laravel</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Add fonts through Laravel’s Vite integration.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="/docs/guides/nextjs"><strong><span>Next.js</span></strong><span>Import packages in a Next.js app.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="https://fonts.nuxt.com/get-started/providers#npm"><strong><span>Nuxt</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Use the Nuxt Fonts npm provider.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="/docs/guides/qwik"><strong><span>Qwik</span></strong><span>Import packages in a Qwik app.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="/docs/guides/react-router"><strong><span>React Router</span></strong><span>Import packages in Framework Mode.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="/docs/guides/remix"><strong><span>Remix</span></strong><span>Import packages with Remix and Vite.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="/docs/guides/svelte"><strong><span>SvelteKit</span></strong><span>Import packages in SvelteKit.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="/docs/guides/vue"><strong><span>Vue</span></strong><span>Import packages in a Vue app.</span></DocsLink>
      </li>
    </ul>
  </section>

  <section className="docs-guide-section">
    <div className="docs-guide-section-header">
      ## UI and styling [#ui-and-styling]
    </div>

    <ul className="docs-guide-list" role="list">
      <li>
        <DocsLink href="https://chakra-ui.com/guides/theming-add-custom-font-to-vite"><strong><span>Chakra UI</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Add a font to a Chakra UI theme.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="https://mui.com/material-ui/react-typography/#roboto-font"><strong><span>Material UI</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Self-host Material UI’s default Roboto font.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="https://panda-css.com/docs/guides/fonts#fontsource"><strong><span>Panda CSS</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Configure a font in Panda CSS.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="https://vuetifyjs.com/en/getting-started/installation/#fonts"><strong><span>Vuetify</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Install Fontsource Roboto for Vuetify.</span></DocsLink>
      </li>
    </ul>
  </section>

  <section className="docs-guide-section">
    <div className="docs-guide-section-header">
      ## Build tools [#build-tools]
    </div>

    <ul className="docs-guide-list" role="list">
      <li>
        <DocsLink href="/docs/guides/storybook"><strong><span>Storybook</span></strong><span>Load fonts in stories and docs.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="/docs/guides/vite"><strong><span>Vite</span></strong><span>Bundle CSS and font assets with Vite.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="/docs/guides/webpack"><strong><span>Webpack</span></strong><span>Bundle CSS and font files with Webpack.</span></DocsLink>
      </li>
    </ul>
  </section>

  <section className="docs-guide-section">
    <div className="docs-guide-section-header">
      ## Other integrations [#other-integrations]
    </div>

    <ul className="docs-guide-list" role="list">
      <li>
        <DocsLink href="https://pub.dev/packages/fontsource"><strong><span>Fontsource for Flutter</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Add fonts with the Fontsource package.</span></DocsLink>
      </li>

      <li>
        <DocsLink href="https://github.com/fontsource/obsidian-fontsource"><strong><span>Obsidian plugin</span><DocsExternalLinkIcon className="docs-guide-external" /></strong><span>Install fonts with the Fontsource plugin.</span></DocsLink>
      </li>
    </ul>
  </section>
</nav>