Fontsource

https://fontsource.org/docs
Admin
Fontsource is a collection of open-source fonts packaged into individual NPM packages for...
Tokens:29,637
Snippets:300
Trust Score:9.7
Update:5 days ago
Show doc for...
Tokens:
Raw
### Install style-loader and css-loader

Source: https://fontsource.org/docs/guides/webpack.md

Install style-loader and css-loader as dev dependencies using npm, yarn, pnpm, or bun.

```sh
npm install -D style-loader css-loader
yarn add -D style-loader css-loader
pnpm add -D style-loader css-loader
bun add -D style-loader css-loader
```

--------------------------------

### Version endpoint HTTP requests

Source: https://fontsource.org/docs/api/version.md

Example GET requests to the Version endpoint for the 'abel' and 'open-sans' packages.

```http
GET https://api.fontsource.org/v1/version/abel
```

```http
GET https://api.fontsource.org/v1/version/open-sans
```

--------------------------------

### Version endpoint response example

Source: https://fontsource.org/docs/api/version.md

Example JSON response from the Version endpoint showing the latest static version, an array of static versions, and optional variable font version details.

```json
{
  "latest": "5.0.4",
  "static": [
    "5.0.4",
    "5.0.3",
    "5.0.2",
    "5.0.1",
    "5.0.0",
    "4.2.2",
    "4.2.1",
    "4.2.0",
    "4.1.1",
    "4.1.0",
    "4.0.1",
    "4.0.0"
  ],
  "latestVariable": "5.0.7",
  "variable": [
    "5.0.7",
    "5.0.6",
    "5.0.5",
    "5.0.4",
    "5.0.3",
    "5.0.2",
    "5.0.1",
    "5.0.0"
  ]
}
```

--------------------------------

### Install @fontsource-utils/scss with multiple package managers

Source: https://fontsource.org/docs/getting-started/faces-mixin.md

Install the @fontsource-utils/scss helper package using npm, yarn, pnpm, or bun. Choose the command for your package manager.

```sh
npm install @fontsource-utils/scss
```

```sh
yarn add @fontsource-utils/scss
```

```sh
pnpm add @fontsource-utils/scss
```

```sh
bun add @fontsource-utils/scss
```

--------------------------------

### Fontlist API Query Examples

Source: https://fontsource.org/docs/api/fontlist.md

Example HTTP GET requests using the Fontlist endpoint with queries for family, subsets, and lastModified. Note that multiple properties cannot be queried at once.

```http
GET https://api.fontsource.org/fontlist?family
```

```http
GET https://api.fontsource.org/fontlist?subsets
```

```http
GET https://api.fontsource.org/fontlist?lastModified
```

--------------------------------

### Install @fontsource-variable/nunito-sans with package managers

Source: https://fontsource.org/docs/getting-started/variable.md

Install the variable font package using npm, yarn, pnpm, or bun. Choose the command for your package manager.

```sh
npm install @fontsource-variable/nunito-sans
```

```sh
yarn add @fontsource-variable/nunito-sans
```

```sh
pnpm add @fontsource-variable/nunito-sans
```

```sh
bun add @fontsource-variable/nunito-sans
```

--------------------------------

### Fonts API Query Examples (URL)

Source: https://fontsource.org/docs/api/fonts.md

Example URLs for querying the Fonts endpoint with various filters, such as subsets, weights, styles, and lastModified.

```http
GET https://api.fontsource.org/v1/fonts?subsets=latin,latin-ext&variable=true
```

```http
GET https://api.fontsource.org/v1/fonts?weights=400,900&styles=normal
```

```http
GET https://api.fontsource.org/v1/fonts?lastModified=2022-09-22
```

--------------------------------

### Install Fontsource font package

Source: https://fontsource.org/docs/guides/storybook.md

Install the @fontsource-variable/inter package using your preferred package manager. The commands are equivalent alternatives; choose one.

```sh
npm install @fontsource-variable/inter
yarn add @fontsource-variable/inter
pnpm add @fontsource-variable/inter
bun add @fontsource-variable/inter
```

--------------------------------

### Install Static Font Package (Open Sans)

Source: https://fontsource.org/docs/getting-started/install.md

Install the static font package for Open Sans using your preferred package manager. Use the static package when a family has no variable font or when your project specifically needs fixed font faces.

```sh
npm install @fontsource/open-sans
yarn add @fontsource/open-sans
pnpm add @fontsource/open-sans
bun add @fontsource/open-sans
```

--------------------------------

### Fontlist API Response Example

Source: https://fontsource.org/docs/api/fontlist.md

Example JSON response from the Fontlist endpoint showing font IDs mapped to their types (google, icons, other).

```json
{
  ...
  "abeezee": "google",
  "material-icons": "icons",
  "yakuhanjp": "other"
  ...
}
```

--------------------------------

### Install Variable Font Package (Open Sans)

Source: https://fontsource.org/docs/getting-started/install.md

Install the variable font package for Open Sans using your preferred package manager. The variable package provides a continuous range of weights and often needs fewer files than static faces.

```sh
npm install @fontsource-variable/open-sans
yarn add @fontsource-variable/open-sans
pnpm add @fontsource-variable/open-sans
bun add @fontsource-variable/open-sans
```

--------------------------------

### Stats API Response Example (JSON)

Source: https://fontsource.org/docs/api/stats.md

Example JSON response from the Stats endpoint showing download statistics for a font, including total, static, and variable counts with NPM and jsDelivr metrics.

```json
{
  "total":{
    "npmDownloadTotal":8566215,
    "npmDownloadMonthly":731202,
    "jsDelivrHitsTotal":46488758,
    "jsDelivrHitsMonthly":8210654
  },
  "static":{
    "npmDownloadTotal":8288204,
    "npmDownloadMonthly":637495,
    "jsDelivrHitsTotal":46483427,
    "jsDelivrHitsMonthly":8207141
  },
  "variable":{
    "npmDownloadTotal":278011,
    "npmDownloadMonthly":93707,
    "jsDelivrHitsTotal":5331,
    "jsDelivrHitsMonthly":3513
  }
}
```

--------------------------------

### Apply font family in global CSS (src/global.css)

Source: https://fontsource.org/docs/guides/qwik.md

Add the font family to the global stylesheet, which a Qwik starter imports from its root component. The example also sets a heading font weight.

```css
body {
  font-family: "Open Sans Variable", sans-serif;
}

h1 {
  font-weight: 700;
}
```

--------------------------------

### Fonts API Response Example (JSON)

Source: https://fontsource.org/docs/api/fonts.md

Example JSON response from the Fonts endpoint, showing an array of font objects with attributes like id, family, subsets, weights, styles, and more.

```json
[
  {
    "id": "abeezee",
    "family": "ABeeZee",
    "subsets": ["latin"],
    "weights": [400],
    "styles": ["italic", "normal"],
    "defSubset": "latin",
    "variable": false,
    "lastModified": "2020-09-02",
    "category": "sans-serif",
    "version": "v14",
    "type": "google"
  }
  ...
]
```

--------------------------------

### Import Material Icons font variations

Source: https://fontsource.org/docs/getting-started/material-icons.md

Import the installed Material Icons font variations in your application's entry file or component. The example shows imports for all five variations: material-icons, material-icons-round, material-icons-outlined, material-icons-sharp, and material-icons-two-tone.

```jsx
import "@fontsource/material-icons";
import "@fontsource/material-icons-round";
import "@fontsource/material-icons-outlined";
import "@fontsource/material-icons-sharp";
import "@fontsource/material-icons-two-tone";
```

--------------------------------

### Font ID Response Example

Source: https://fontsource.org/docs/api/font-id.md

Example JSON response for the Font ID endpoint, showing the structure with attributes like id, family, subsets, weights, styles, unicodeRange, defSubset, variable, lastModified, category, version, type, and variants.

```json
{
  "id": "abel",
  "family": "Abel",
  "subsets": ["latin"],
  "weights": [400],
  "styles": ["normal"],
  "unicodeRange": {
    "latin": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
  },
  "defSubset": "latin",
  "variable": false,
  "lastModified": "2020-09-10",
  "category": "sans-serif",
  "version": "v12",
  "type": "google",
  "variants": {
    "400": {
      "normal": {
        "latin": {
          "url": {
            "woff2": "https://cdn.jsdelivr.net/fontsource/fonts/abel@latest/latin-400-normal.woff2",
            "woff": "https://cdn.jsdelivr.net/fontsource/fonts/abel@latest/latin-400-normal.woff",
            "ttf": "https://cdn.jsdelivr.net/fontsource/fonts/abel@latest/latin-400-normal.ttf"
          }
        }
      }
    }
  }
}
```

--------------------------------

### Variable endpoint response example

Source: https://fontsource.org/docs/api/variable.md

Example JSON response from the Variable endpoint showing axis data for the Inter font. The response includes an 'axes' object with 'slnt' and 'wght' axes, each having default, min, max, and step values, and a 'family' field.

```json
{
  "axes": {
    "slnt": {
      "default": "0",
      "min": "-10",
      "max": "0",
      "step": "1"
    },
    "wght": {
      "default": "400",
      "min": "100",
      "max": "900",
      "step": "1"
    }
  },
  "family": "Inter"
}
```

--------------------------------

### Import Fontsource mixins with @use

Source: https://fontsource.org/docs/getting-started/faces-mixin.md

Import the Fontsource mixins and the font package's SCSS module using the @use rule. The font package example is @fontsource-variable/recursive.

```scss
@use "pkg:@fontsource-utils/scss" as fontsource;
@use "pkg:@fontsource-variable/recursive/scss" as recursive;
```

--------------------------------

### Axis Registry API Response Example

Source: https://fontsource.org/docs/api/axis-registry.md

Example JSON response from the Axis Registry endpoint. Shows an axis tag 'ARRR' with its name, description, min, max, default, and precision values. The response is a JSON object keyed by axis tag.

```json
{
  ...
  "ARRR":{
    "name":"AR Retinal Resolution",
    "description":"Resolution-specific enhancements in AR/VR typefaces to optimize rendering across the different resolutions of the headsets making designs accessible and easy to read.",
    "min":10,
    "max":60,
    "default":10,
    "precision":0
  },
  ...
}
```

--------------------------------

### Import Static Font Default Weight

Source: https://fontsource.org/docs/getting-started/install.md

Import the static font package to get the default weight, which is 400 for most families.

```jsx
import "@fontsource/open-sans";
```

--------------------------------

### Preload Open Sans font with Vite ?url directive

Source: https://fontsource.org/docs/getting-started/preload.md

Use the Vite `?url` static asset directive to import the font file URL and include a `<link rel="preload">` tag in the HTML head. This example preloads the Open Sans variable font's latin subset. Only preload critical fonts and subsets to avoid increased initial load times and negative effects on Core Web Vitals.

```jsx
import '@fontsource-variable/open-sans';
import openSansWoff2 from '@fontsource-variable/open-sans/files/open-sans-latin-wght-normal.woff2?url';

const App = () => {
  return (
    <html lang="en">
      <head>
        <link rel="preload" as="font" type="font/woff2" href={openSansWoff2} crossorigin="anonymous" />
      </head>
    </html>
  );
};
```

--------------------------------

### GET /v1/version/{id}

Source: https://fontsource.org/docs/api/version.md

Retrieves NPM version information for a specific Fontsource package. The response includes the latest static version, a list of static versions, and optional variable version details.

```APIDOC
## [GET] /v1/version/{id}

### Description
Retrieves NPM version information for a specific Fontsource package.

### Method
GET

### Endpoint
`https://api.fontsource.org/v1/version/{id}`

### Parameters
#### Path Parameters
- **id** (string) - Required - The package identifier (e.g., `abel`, `open-sans`).

### Response
#### Success Response (200)
- **latest** (string) - Latest static NPM version.
- **static** (string[]) - Static NPM versions sorted newest to oldest.
- **latestVariable** (Optional<string>) - Latest variable NPM version.
- **variable** (Optional<string[]>) - Variable NPM versions sorted newest to oldest.

#### Response Example
```json
{
  "latest": "5.0.4",
  "static": [
    "5.0.4",
    "5.0.3",
    "5.0.2",
    "5.0.1",
    "5.0.0",
    "4.2.2",
    "4.2.1",
    "4.2.0",
    "4.1.1",
    "4.1.0",
    "4.0.1",
    "4.0.0"
  ],
  "latestVariable": "5.0.7",
  "variable": [
    "5.0.7",
    "5.0.6",
    "5.0.5",
    "5.0.4",
    "5.0.3",
    "5.0.2",
    "5.0.1",
    "5.0.0"
  ]
}
```
```

--------------------------------

### Preload Critical Font with ?url Import

Source: https://fontsource.org/docs/guides/vite.md

Use Vite's ?url import to get the final build URL of a font file for preloading. Preload only the subset and style needed immediately.

```ts
import openSansUrl from "@fontsource-variable/open-sans/files/open-sans-latin-wght-normal.woff2?url";
```

--------------------------------

### Using the generator mixin with arguments

Source: https://fontsource.org/docs/getting-started/generator-mixin.md

Example of using the generator mixin with a $weights argument and a content block. The comment shows that map.get($props, weights) resolves to 'Hello 400, 800' and map.get($props, family) defaults to 'Open Sans'.

```scss
@include generator(
    $weights: (
      400,
      800,
    )
  ) using ($props) {
  /* #{map.get($props, weights)} will resolve to: Hello 400, 800 */
  /* #{map.get($props, family)} will default to: Open Sans */
}
```

--------------------------------

### GET Font ID Request

Source: https://fontsource.org/docs/api/font-id.md

HTTP request to retrieve font details by ID. The endpoint is GET https://api.fontsource.org/v1/fonts/{id}.

```http
GET https://api.fontsource.org/v1/fonts/abel
```

```http
GET https://api.fontsource.org/v1/fonts/open-sans
```

--------------------------------

### GET /v1/fonts

Source: https://fontsource.org/docs/api/introduction.md

Retrieves information about the fonts supported by the Fontsource repository. This endpoint accepts a GET request and returns font data.

```APIDOC
## GET /v1/fonts

### Description
Retrieves information about the fonts supported by the Fontsource repository.

### Method
GET

### Endpoint
https://api.fontsource.org/v1/fonts

### Response
#### Success Response (200)
- **fonts** (array) - List of font objects.

#### Response Example
{
  "fonts": []
}

### Errors
- **400** - The request was malformed.
- **404** - The requested resource was not found.
- **422** - The request was unprocessable.
- **429** - The request was rate limited.
- **500** - An internal server error occurred.
```

--------------------------------

### License Metadata - Before

Source: https://fontsource.org/docs/getting-started/migrate-v5.md

Old metadata.json structure with license as a string.

```json
{
  ...
  "license": "https://fonts.google.com/attribution",
  ...
}
```

--------------------------------

### License Metadata - After

Source: https://fontsource.org/docs/getting-started/migrate-v5.md

New metadata.json structure with license as an object containing type, url, and attribution.

```json
{
  ...
  "license": {
    "type": "OFL-1.1",
    "url": "http://scripts.sil.org/OFL",
    "attribution": "Copyright <attribution>"
  },
  ...
}
```

--------------------------------

### Importing multiple static weights vs variable font

Source: https://fontsource.org/docs/getting-started/faq.md

Shows the contrast between importing multiple static weights and using a variable font to reduce bundle size.

```jsx
// Instead of multiple static weights
import "@fontsource/open-sans/300.css";
import "@fontsource/open-sans/400.css";
import "@fontsource/open-sans/500.css";
import "@fontsource/open-sans/700.css";

// Use variable fonts
import "@fontsource-variable/open-sans";
```

--------------------------------

### Import multiple standard axes using standard.css

Source: https://fontsource.org/docs/getting-started/variable.md

Recommended way to import multiple standard axes at once. Includes the wght axis automatically; use standard-italic.css for italic variants.

```jsx
import "@fontsource-variable/nunito-sans/standard.css";
import "@fontsource-variable/nunito-sans/standard-italic.css";
```

--------------------------------

### Import Fontsource stylesheets using direct URLs

Source: https://fontsource.org/docs/getting-started/sass-introduction.md

Alternative to the pkg: import directive when it cannot be used. Adjust the paths as necessary.

```scss
// Adjust path as necessary.
@use "../node_modules/@fontsource-utils/src/mixins.scss" as fontsource;
@use "../node_modules/@fontsource-variable/recursive/scss/metadata.scss" as recursive;
```

--------------------------------

### Sass Integration - After

Source: https://fontsource.org/docs/getting-started/migrate-v5.md

New Sass mixin usage in V5, using faces with multiple subsets, weights, styles, and directory.

```scss
@include OpenSans.faces(
  $subsets: latin,
  $weights: (300, 400, 500, 800),
  $styles: all,
  $directory: "~@fontsource/open-sans/files"
);
```

--------------------------------

### Import individual font subsets (Open Sans)

Source: https://fontsource.org/docs/getting-started/subsets.md

Import specific subset CSS files for a font, such as latin, latin-ext with weight 300, and greek with weight 700 and italic style. This method is not available for variable fonts and is not recommended unless necessary.

```javascript
import "@fontsource/open-sans/latin.css";
import "@fontsource/open-sans/latin-ext-300.css";
import "@fontsource/open-sans/greek-700-italic.css";
```

--------------------------------

### Get font CSS URL with Vite ?url import for links()

Source: https://fontsource.org/docs/guides/react-router.md

Use Vite's ?url suffix to get a CSS URL for explicit route stylesheet links. The links() function returns a stylesheet link object. Requires the root document to render React Router's <Links /> component.

```tsx
import fontCssHref from "@fontsource/jetbrains-mono/400.css?url";

export function links() {
  return [{ rel: "stylesheet", href: fontCssHref }];
}
```

--------------------------------

### Generator Mixin Usage

Source: https://fontsource.org/docs/getting-started/generator-mixin.md

Example of using the generator mixin with a content block to access properties.

```APIDOC
## Generator Mixin Usage

### Description
Example of using the generator mixin with a content block to access properties.

### Code Example
```scss
@include generator(
    $weights: (
      400,
      800,
    )
  ) using ($props) {
  /* #{map.get($props, weights)} will resolve to: Hello 400, 800 */
  /* #{map.get($props, family)} will default to: Open Sans */
}
```

### Properties
#### Mixin Arguments
These properties are passed into the content block and are constant throughout each iteration.

| Property  | Example |
| --------- | ------- |
| metadata  | [see here](https://github.com/fontsource/font-files/blob/main/fonts/google/open-sans/scss/metadata.scss) |
| directory | `@fontsource/open-sans/files` |
| family    | Open Sans |
| display   | `swap` |
| formats   | `(woff, woff2)` |
| subsets   | `(latin)` |
| weights   | `(400, 800)` |
| styles    | `(normal)` |
| axes      | `(wght, ital)` |

#### Loop Parameters
These variables change on each iteration of the content block.

| Property      | Example |
| ------------- | ------- |
| variant       | `open-sans-latin-800-italic` |
| unicodeSubset | `cyrillic` |
| unicodeRange  | `(U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116)` |
| weight        | `800` |
| axis          | `wght` |
| style         | `italic` |

#### CSS Properties
These are the CSS properties that are calculated and used by default in the faces mixin.

| Property      | Example |
| ------------- | ------- |
| font-family   | `"Open Sans"` |
| font-style    | `italic` |
| font-display  | `swap` |
| font-weight   | `800` |
| font-stretch  | `300 800` |
| src           | `url(./files/open-sans-cyrillic-800-italic.woff2) format('woff2'), url(./files/open-sans-cyrillic-800-italic.woff) format('woff')` |
| unicode-range | `U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116` |
```

--------------------------------

### Importing only needed weights

Source: https://fontsource.org/docs/getting-started/faq.md

Import only the specific weights and styles you actually use to reduce bundle size.

```jsx
import "@fontsource/open-sans/400.css"; // Only import weight 400
import "@fontsource/open-sans/700.css"; // Only import weight 700
```

--------------------------------

### GET /v1/fonts

Source: https://fontsource.org/docs/api/fonts.md

Retrieves an array of font objects. Supports optional query parameters to filter the list of fonts.

```APIDOC
## [GET] /v1/fonts

### Description
Retrieves an array of font objects. Each font object contains detailed information about a specific font. Supports optional query parameters to filter the list of fonts.

### Method
GET

### Endpoint
`https://api.fontsource.org/v1/fonts`

### Parameters
#### Query Parameters
- **id** (string) - Optional - Filter by font ID.
- **family** (string) - Optional - Filter by font family.
- **subsets** (string) - Optional - Filter by language subsets. Multiple values can be separated by commas (AND operator).
- **weights** (number[]) - Optional - Filter by font weights. Multiple values can be separated by commas (AND operator).
- **styles** (string[]) - Optional - Filter by font styles. Multiple values can be separated by commas (AND operator).
- **defSubset** (string) - Optional - Filter by default subset.
- **variable** (boolean) - Optional - Filter by whether the font is variable.
- **lastModified** (string) - Optional - Filter by last modified date.
- **category** (string) - Optional - Filter by font category.
- **version** (string) - Optional - Filter by font version.
- **type** (string) - Optional - Filter by font type.

### Response
#### Success Response (200)
Returns an array of font objects. Each font object has the following attributes:
- **id** (string) - The font ID
- **family** (string) - The font family
- **subsets** (string[]) - Language subsets
- **weights** (number[]) - Font weights
- **styles** (string[]) - Font styles
- **defSubset** (string) - Default subset
- **variable** (boolean) - Is the font variable
- **lastModified** (string) - Last modified date
- **category** (string) - Font category
- **version** (string) - Font version
- **type** (string) - Font type

#### Response Example
```json
[
  {
    "id": "abeezee",
    "family": "ABeeZee",
    "subsets": ["latin"],
    "weights": [400],
    "styles": ["italic", "normal"],
    "defSubset": "latin",
    "variable": false,
    "lastModified": "2020-09-02",
    "category": "sans-serif",
    "version": "v14",
    "type": "google"
  }
]
```

### Example Requests
- `GET https://api.fontsource.org/v1/fonts?subsets=latin,latin-ext&variable=true`
- `GET https://api.fontsource.org/v1/fonts?weights=400,900&styles=normal`
- `GET https://api.fontsource.org/v1/fonts?lastModified=2022-09-22`
```

--------------------------------

### Apply font in CSS (src/style.css)

Source: https://fontsource.org/docs/guides/vue.md

Set the font-family to 'Open Sans Variable' on the body and use font-weight for headings. This CSS is imported in the entry point.

```css
/* src/style.css */
body {
  margin: 0;
  font-family: "Open Sans Variable", sans-serif;
}

h1 {
  font-weight: 700;
}
```

--------------------------------

### CSS font-family for variable fonts

Source: https://fontsource.org/docs/getting-started/faq.md

Variable fonts typically have 'Variable' in their font-family name, as shown in this CSS example.

```css
body {
  font-family: "Open Sans Variable", sans-serif;
}
```

--------------------------------

### Import all variable axes using full.css

Source: https://fontsource.org/docs/getting-started/variable.md

Import all available axes for a variable font using the full CSS file. Use full-italic.css for italic variants.

```jsx
import "@fontsource-variable/nunito-sans/full.css";
import "@fontsource-variable/nunito-sans/full-italic.css";
```

--------------------------------

### Import font through global stylesheet (global.css and +layout.svelte)

Source: https://fontsource.org/docs/guides/svelte.md

Keep all global typography in one CSS file by importing the font in src/styles/global.css and then importing that stylesheet in the root layout. The layout uses Svelte 5 snippet syntax.

```css
/* src/styles/global.css */
@import "@fontsource-variable/inter/wght.css";

body {
  margin: 0;
  font-family: "Inter Variable", sans-serif;
}

h1 {
  font-weight: 700;
}
```

```svelte
<!-- src/routes/+layout.svelte -->
<script>
  import "../styles/global.css";

  let { children } = $props();
</script>

{@render children()}
```

--------------------------------

### GET /fontlist

Source: https://fontsource.org/docs/api/fontlist.md

Retrieves a list of fonts and their associated properties. The response is a JSON object mapping font IDs to their types.

```APIDOC
## [GET] https://api.fontsource.org/fontlist

### Description
Retrieves a list of fonts and their associated properties. The response is a JSON object mapping font IDs to their types.

### Method
GET

### Endpoint
https://api.fontsource.org/fontlist

### Parameters
#### Query Parameters
- **family** (string) - Optional - Returns font family names
- **subsets** (string[]) - Optional - Returns supported subsets
- **weights** (number[]) - Optional - Returns supported weights
- **styles** (string[]) - Optional - Returns supported styles
- **variable** (boolean) - Optional - Returns whether the font is variable
- **category** (string) - Optional - Returns font category
- **lastModified** (string) - Optional - Returns last modified date
- **version** (string) - Optional - Returns font version
- **type** (string) - Optional - Returns font type

### Request Example
GET https://api.fontsource.org/fontlist?family

### Response
#### Success Response (200)
- **\[id]** (string) - The font ID
- **type** (string) - The font type (google, icons, or other)

#### Response Example
{
  "abeezee": "google",
  "material-icons": "icons",
  "yakuhanjp": "other"
}
```

--------------------------------

### GET /v1/fonts/{id}

Source: https://fontsource.org/docs/api/font-id.md

Retrieves detailed information about a specific font by its ID. The response includes font metadata and file variant URLs.

```APIDOC
## [GET] /v1/fonts/{id}

### Description
Retrieves detailed information about a specific font supported by Fontsource, identified by its font ID.

### Method
GET

### Endpoint
`https://api.fontsource.org/v1/fonts/{id}`

### Parameters
#### Path Parameters
- **id** (string) - Required - The font ID (e.g., `abel`, `open-sans`)

### Response
#### Success Response (200)
Returns a JSON object with the following attributes:
- **id** (string) - The font ID
- **family** (string) - The font family
- **subsets** (string[]) - Language subsets
- **weights** (number[]) - Font weights
- **styles** (string[]) - Font styles
- **unicodeRange** (Record<string, string>) - Unicode range
- **defSubset** (string) - Default subset
- **variable** (boolean) - Is the font variable
- **lastModified** (string) - Last modified date
- **category** (string) - Font category
- **version** (string) - Font version
- **type** (string) - Font type
- **variants** (Record<string, object>) - File variants, keyed by weight, style, and subset, containing URL objects with file formats (`woff2`, `woff`, `ttf`)

#### Response Example
```json
{
  "id": "abel",
  "family": "Abel",
  "subsets": ["latin"],
  "weights": [400],
  "styles": ["normal"],
  "unicodeRange": {
    "latin": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
  },
  "defSubset": "latin",
  "variable": false,
  "lastModified": "2020-09-10",
  "category": "sans-serif",
  "version": "v12",
  "type": "google",
  "variants": {
    "400": {
      "normal": {
        "latin": {
          "url": {
            "woff2": "https://cdn.jsdelivr.net/fontsource/fonts/abel@latest/latin-400-normal.woff2",
            "woff": "https://cdn.jsdelivr.net/fontsource/fonts/abel@latest/latin-400-normal.woff",
            "ttf": "https://cdn.jsdelivr.net/fontsource/fonts/abel@latest/latin-400-normal.ttf"
          }
        }
      }
    }
  }
}
```

### Example
- `GET https://api.fontsource.org/v1/fonts/abel`
- `GET https://api.fontsource.org/v1/fonts/open-sans`
```

--------------------------------

### Generate CSS with multiple subsets, weights, and all styles

Source: https://fontsource.org/docs/getting-started/faces-mixin.md

Customize font variations by specifying multiple subsets and weights, and use the 'all' option to include all available styles.

```scss
@include fontsource.faces(
  $metadata: recursive.$metadata,
  $subsets: (
    latin,
    greek,
  ),
  $weights: (
    300,
    400,
    800,
  ),
  $styles: all
);
```

--------------------------------

### GET /v1/stats/{id}

Source: https://fontsource.org/docs/api/stats.md

Retrieves download statistics for a specific font identified by its ID. Returns an object with total, static, and variable download counts.

```APIDOC
## GET /v1/stats/{id}

### Description
Retrieves download statistics for a specific font identified by its ID. Returns an object with total, static, and variable download counts.

### Method
GET

### Endpoint
`https://api.fontsource.org/v1/stats/{id}`

### Parameters
#### Path Parameters
- **id** (string) - Required - The font identifier (e.g., `abel`, `open-sans`).

### Response
#### Success Response (200)
Returns an object with the following attributes:
- **total** (DownloadStats) - Total download counts
- **static** (DownloadStats) - Static download counts
- **variable** (Optional<DownloadStats>) - Variable download counts

Each DownloadStats object contains:
- **npmDownloadTotal** (number) - Total NPM download count
- **npmDownloadMonthly** (number) - Monthly NPM download count
- **jsDelivrHitsTotal** (number) - Total jsDelivr hits
- **jsDelivrHitsMonthly** (number) - Monthly jsDelivr hits

#### Response Example
```json
{
  "total": {
    "npmDownloadTotal": 8566215,
    "npmDownloadMonthly": 731202,
    "jsDelivrHitsTotal": 46488758,
    "jsDelivrHitsMonthly": 8210654
  },
  "static": {
    "npmDownloadTotal": 8288204,
    "npmDownloadMonthly": 637495,
    "jsDelivrHitsTotal": 46483427,
    "jsDelivrHitsMonthly": 8207141
  },
  "variable": {
    "npmDownloadTotal": 278011,
    "npmDownloadMonthly": 93707,
    "jsDelivrHitsTotal": 5331,
    "jsDelivrHitsMonthly": 3513
  }
}
```

### Examples
- `GET https://api.fontsource.org/v1/stats/abel`
- `GET https://api.fontsource.org/v1/stats/open-sans`
```

--------------------------------

### TypeScript error messages for missing Fontsource modules

Source: https://fontsource.org/docs/getting-started/faq.md

Example error messages shown when TypeScript cannot find Fontsource modules due to the noUncheckedSideEffects flag.

```sh
Cannot find module '@fontsource/inter' or its corresponding type declarations.
Cannot find module '@fontsource-variable/open-sans' or its corresponding type declarations.
```

--------------------------------

### Import specific weights from static package

Source: https://fontsource.org/docs/guides/vue.md

For static packages, import only the weights and styles you need to reduce bundle size.

```ts
import "@fontsource/open-sans/400.css";
import "@fontsource/open-sans/700.css";
```

--------------------------------

### Import font in Vue entry point (src/main.ts)

Source: https://fontsource.org/docs/guides/vue.md

Import the variable font's wght.css in the application entry point to make the font available to the whole app. Import from a component or route instead to keep the font in a separate bundle.

```ts
// src/main.ts
import { createApp } from "vue";
import "@fontsource-variable/open-sans/wght.css";
import "./style.css";
import App from "./App.vue";

createApp(App).mount("#app");
```

--------------------------------

### GET /v1/stats/badge/{metric}

Source: https://fontsource.org/docs/api/stats.md

Retrieves Shields-compatible badges for aggregate download statistics across all active font packages. The metric path parameter specifies which statistic to display.

```APIDOC
## GET /v1/stats/badge/{metric}

### Description
Retrieves Shields-compatible badges for aggregate download statistics across all active font packages. The metric path parameter specifies which statistic to display.

### Method
GET

### Endpoint
`https://api.fontsource.org/v1/stats/badge/{metric}`

### Parameters
#### Path Parameters
- **metric** (string) - Required - The metric for the badge. Supported values: `npm-monthly`, `npm-total`, `jsdelivr-monthly`, `jsdelivr-total`.

### Response
#### Success Response (200)
Returns a Shields-compatible badge image.

### Examples
- `GET https://api.fontsource.org/v1/stats/badge/npm-monthly`
- `GET https://api.fontsource.org/v1/stats/badge/npm-total`
- `GET https://api.fontsource.org/v1/stats/badge/jsdelivr-monthly`
- `GET https://api.fontsource.org/v1/stats/badge/jsdelivr-total`
```

--------------------------------

### Use font with useStylesScoped$ in a component

Source: https://fontsource.org/docs/guides/qwik.md

For component-only styles, use the same font family with useStylesScoped$(). This example shows a scoped style block and a heading element using the font.

```tsx
import { component$, useStylesScoped$ } from "@builder.io/qwik";
import "@fontsource-variable/open-sans/wght.css";

export default component$(() => {
  useStylesScoped$(`
    .heading {
      font-family: "Open Sans Variable", sans-serif;
      font-weight: 600;
    }
  `);

  return <h1 class="heading">Hello Qwik</h1>;
});
```

--------------------------------

### Import generator mixin and sass:map

Source: https://fontsource.org/docs/getting-started/generator-mixin.md

Import the sass:map module and the Fontsource mixins to use the generator mixin. This example imports for the Open Sans font.

```scss
@use "sass:map";
@use "pkg:@fontsource-utils/scss" as fontsource;
```

--------------------------------

### Import Open Sans font stylesheet with @use

Source: https://fontsource.org/docs/getting-started/sass-import.md

Use the @use rule with the pkg: prefix to import the Open Sans font stylesheet from the npm registry. Requires the NodePackageImporter() in your Sass compiler.

```scss
@use "pkg:@fontsource/open-sans/index.css";
```

--------------------------------

### Import font CSS in root layout (src/routes/layout.tsx)

Source: https://fontsource.org/docs/guides/qwik.md

Add the Fontsource CSS import to the root layout to make the font available throughout the application. Qwik City renders every page inside this root layout; you can also import from a nested layout or component.

```tsx
import { component$, Slot } from "@builder.io/qwik";
import "@fontsource-variable/open-sans/wght.css";

export default component$(() => {
  return (
    <main>
      <Slot />
    </main>
  );
});
```

--------------------------------

### Apply Font Family in CSS

Source: https://fontsource.org/docs/guides/vite.md

Apply the font family in your stylesheet. The example sets the body font to 'Open Sans Variable' and uses a heavier weight for h1 elements.

```css
/* src/style.css */
body {
  font-family: "Open Sans Variable", sans-serif;
}

h1 {
  font-weight: 700;
}
```

--------------------------------

### GET /v1/variable/{id}

Source: https://fontsource.org/docs/api/variable.md

Fetches axis data for a specific variable font identified by its ID. The response includes the font family and a record of axes with their default, min, max, and step values.

```APIDOC
## GET /v1/variable/{id}

### Description
Fetches axis data for a specific variable font identified by its ID. The response includes the font family and a record of axes with their default, min, max, and step values.

### Method
GET

### Endpoint
`GET https://api.fontsource.org/v1/variable/{id}`

### Parameters
#### Path Parameters
- **id** (string) - Required - The font identifier (e.g., `inter`, `roboto-flex`).

### Response
#### Success Response (200)
Returns an object with:
- **family** (string) - Font family
- **axes** (Record<string, AxesData>) - Axis data

Each AxesData object contains:
- **default** (number) - Default value
- **min** (number) - Minimum value
- **max** (number) - Maximum value
- **step** (number) - Step value

#### Response Example
```json
{
  "axes": {
    "slnt": {
      "default": "0",
      "min": "-10",
      "max": "0",
      "step": "1"
    },
    "wght": {
      "default": "400",
      "min": "100",
      "max": "900",
      "step": "1"
    }
  },
  "family": "Inter"
}
```

### Example
- `GET https://api.fontsource.org/v1/variable/inter`
- `GET https://api.fontsource.org/v1/variable/roboto-flex`
- `GET https://api.fontsource.org/v1/variable/wavefont`
```
Tokens:
Raw