# Documentation

- Getting Started

  - **Contents**
  - [Introduction](/docs/getting-started/introduction): Learn why and how to self-host open-source fonts with Fontsource.
  - [Install](/docs/getting-started/install): Install Fontsource packages and import fonts into a bundled web application.
  - [Variable Fonts](/docs/getting-started/variable): Install, import, and configure variable font packages from Fontsource.
  - [Individual Subsets](/docs/getting-started/subsets): Import individual Fontsource language subsets and font variants.
  - [Font Display](/docs/getting-started/display): Configure the CSS font-display behavior used by Fontsource fonts.
  - [Preloading Fonts](/docs/getting-started/preload): Preload critical Fontsource font files without overloading initial page requests.
  - [CDN](/docs/getting-started/cdn): Load versioned Fontsource stylesheets and font files through the jsDelivr CDN.
  - [FAQ](/docs/getting-started/faq): Find answers to common Fontsource installation, bundler, and package questions.
  - [AI and LLMs](/docs/getting-started/ai-and-llms): Use Fontsource documentation with AI coding assistants and LLM tools.

  - **Icons**
  - [Material Icons](/docs/getting-started/material-icons): Install and use Material Icons font packages from Fontsource.
  - [Material Symbols](/docs/getting-started/material-symbols): Install and customize variable Material Symbols packages from Fontsource.

  - **Sass**
  - [Sass Introduction](/docs/getting-started/sass-introduction): Configure Dart Sass package imports for Fontsource font packages.
  - [Sass Import](/docs/getting-started/sass-import): Import Fontsource CSS stylesheets in Sass and SCSS with the @use rule.
  - [Faces Mixin](/docs/getting-started/faces-mixin): Generate customized @font-face rules with the Fontsource Sass Faces mixin.
  - [Generator Mixin](/docs/getting-started/generator-mixin): Generate advanced Fontsource CSS with fine-grained Sass configuration.

  - **Migration**
  - [Migrating to V5](/docs/getting-started/migrate-v5): Migrate Fontsource projects to v5 package names, imports, Sass, and metadata.
- Guides

  - **Frameworks**
  - [Astro](https://docs.astro.build/en/guides/fonts/#using-fontsource)
  - [Angular](/docs/guides/angular): Install, import, and use Fontsource fonts in an Angular application.
  - [Flutter](https://pub.dev/packages/fontsource)
  - [Gatsby](https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/#self-host-google-fonts-with-fontsource)
  - [Next.js](/docs/guides/nextjs): Install and use Fontsource fonts with the Next.js App Router or Pages Router.
  - [Qwik](/docs/guides/qwik): Install and use Fontsource fonts in a Qwik City application.
  - [Remix](/docs/guides/remix): Install and use Fontsource fonts in Remix with Vite or the classic compiler.
  - [SvelteKit](/docs/guides/svelte): Install and use Fontsource fonts across Svelte and SvelteKit applications.
  - [Vue.js](/docs/guides/vue): Install and use Fontsource fonts from a Vue application entry point.

  - **Component Libraries**
  - [Chakra UI](https://chakra-ui.com/community/recipes/using-fonts)
  - [Material UI](https://mui.com/material-ui/react-typography/#install-with-npm)
  - [Panda CSS](https://panda-css.com/docs/guides/fonts#fontsource)

  - **Other**
  - [Obsidian](https://github.com/fontsource/obsidian-fontsource)
  - [Webpack](/docs/guides/webpack): Configure Webpack to bundle and use Fontsource font packages.
- API

  - **Setup**
  - [Getting Started API](/docs/api/introduction): Get started with the public, read-only Fontsource API and its request limits.

  - **Reference**
  - [Axis Registry](/docs/api/axis-registry): Look up Fontsource variable font axis tags, names, ranges, defaults, and descriptions.
  - [Fontlist](/docs/api/fontlist): Retrieve a compact Fontsource font list and selected properties for every family.
  - [Fonts](/docs/api/fonts): Query Fontsource font metadata by family, subset, weight, style, category, and more.
  - [Font ID](/docs/api/font-id): Retrieve metadata for a specific Fontsource font family by its ID.
  - [Stats](/docs/api/stats): Retrieve npm download and jsDelivr usage statistics for a Fontsource font.
  - [Variable](/docs/api/variable): Retrieve variable font axes and supported ranges for a Fontsource family.
  - [Version](/docs/api/version): Retrieve current npm package version information for a Fontsource font.
- [Changelog](https://github.com/fontsource/fontsource/blob/main/CHANGELOG.md)