Skip to content
don’t make it ugly
All resources

PackageAssets, Tools

Fontsource

Self-host any open-source font with an npm install.

Open sourceFree
Visit website (opens in a new tab)View GitHub (opens in a new tab)Read docs (opens in a new tab)
Preview of Fontsource

What it is

Fontsource packages Google Fonts and other open-source typefaces as npm modules, so you can self-host fonts in any framework with one import and no external requests. Variable font packages included.

Why it’s here

The cleanest way to self-host fonts outside Next.js (which has next/font). Vite, Astro, SvelteKit: this is the move.

Best for

  • self-hosting fonts
  • Vite and Astro projects
  • privacy-conscious sites

Can my agent use this?

Agent excellent agent friendliness

Yes. Tell your agent the font name and it can install the matching @fontsource package and import it.

Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.

Access methods

  • Docs
  • GitHub
  • npm

Install

npm install @fontsource-variable/inter

Related resources

  • Iconify
    Preview of Iconify

    Iconify

    One API and one component for two hundred thousand icons from every major set.

    excellent agent friendlinessAsset libraryFreeOpen source
  • Radix Colors
    Preview of Radix Colors

    Radix Colors

    Colour scales designed for real UI, with light and dark modes that actually match.

    excellent agent friendlinessAsset libraryFreeOpen sourceStaff pick
  • Typewolf
    Preview of Typewolf

    Typewolf

    What's trending in type, with real sites showing each font in use.

    limited agent friendlinessWebsiteStaff pick
  • Chrome DevTools MCP
    Preview of Chrome DevTools MCP

    Chrome DevTools MCP

    Let your agent inspect, debug and profile a live Chrome tab.

    excellent agent friendlinessMCP serverFreeOpen source