---
name: Fontsource
slug: fontsource
url: "https://dontmakeitugly.com/resources/fontsource"
website: "https://fontsource.org"
github: "https://github.com/fontsource/fontsource"
docs: "https://fontsource.org/docs/getting-started/introduction"
type: package
categories:
  - assets
  - tools
tags:
  - fonts
  - self-hosting
  - npm
  - typography
  - performance
frameworks:
  - astro
  - svelte
  - vue
  - react
  - agnostic
pricing: free
license: MIT (tooling); fonts keep their own licences
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - documentation
  - github
  - npm
installCommand: "npm install @fontsource-variable/inter"
difficulty: beginner
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Fontsource

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

- Type: Package
- Categories: Assets, Tools
- Pricing: Free · License: MIT (tooling); fonts keep their own licences
- Open source: yes
- Works with: Astro, Svelte, Vue, React, Framework agnostic, Web fonts

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

## Links

- Website: https://fontsource.org
- Docs: https://fontsource.org/docs/getting-started/introduction
- GitHub: https://github.com/fontsource/fontsource

## Can my agent use this?

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

Agent friendliness: 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`

## Prompt to hand your agent

```text
Use Fontsource as a design and implementation reference for this project.

What it is: Self-host any open-source font with an npm install.

Website: https://fontsource.org
Documentation: https://fontsource.org/docs/getting-started/introduction
GitHub: https://github.com/fontsource/fontsource
Install: npm install @fontsource-variable/inter

Use it specifically for:
- self-hosting fonts
- Vite and Astro projects
- privacy-conscious sites

How you can access it: Docs, GitHub, npm.
Works with: Astro, Svelte, Vue, React, Framework agnostic.
License: MIT (tooling); fonts keep their own licences. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [Iconify](https://dontmakeitugly.com/resources/iconify.md): One API and one component for two hundred thousand icons from every major set.
- [Radix Colors](https://dontmakeitugly.com/resources/radix-colors.md): Colour scales designed for real UI, with light and dark modes that actually match.
- [Typewolf](https://dontmakeitugly.com/resources/typewolf.md): What's trending in type, with real sites showing each font in use.
- [Chrome DevTools MCP](https://dontmakeitugly.com/resources/chrome-devtools-mcp.md): Let your agent inspect, debug and profile a live Chrome tab.

## In collections

- [Typography resources every builder should know](https://dontmakeitugly.com/collections/typography-every-builder-should-know.md)

Fontsource is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.