### Install Font Package

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

Use your preferred package manager to install a font package. This example shows installation for Open Sans.

```bash
npm install @fontsource/open-sans
```

```bash
yarn add @fontsource/open-sans
```

```bash
pnpm add @fontsource/open-sans
```

```bash
bun add @fontsource/open-sans
```

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

### Install Webpack Loaders for Fontsource

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

Install `css-loader` and `file-loader` using npm, yarn, pnpm, or bun.

```sh
npm install css-loader file-loader
yarn add css-loader file-loader
pnpm add css-loader file-loader
bun add css-loader file-loader
```

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

### Example Font ID Requests

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

These are example HTTP GET requests to retrieve font details. The first requests details for the 'abel' font, and the second for 'open-sans'.

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

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

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

### Version Response Example

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

This is an example of the JSON response structure for the Version endpoint, detailing available NPM versions for a package.

```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"
  ]
}
```

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

### Example API Calls for Version

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

These examples demonstrate how to call the Version endpoint for specific Fontsource packages like 'abel' and 'open-sans'.

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

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

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

### Variable Endpoint Request Examples

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

Examples of HTTP GET requests to the Variable endpoint for different font IDs.

```http
GET https://api.fontsource.org/v1/variable/inter
```

```http
GET https://api.fontsource.org/v1/variable/roboto-flex
```

```http
GET https://api.fontsource.org/v1/variable/wavefont
```

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

### Install Fontsource Package

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

Install the desired Fontsource variable font package using npm, yarn, or pnpm.

```bash
npm install @fontsource-variable/open-sans
```

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

### Response Example for Fonts Endpoint

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

An example of the JSON response structure for a single font object.

```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"
  }
  ...
]
```

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

### Install Fontsource SCSS Package

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

Install the necessary helper package for using Fontsource mixins in your project.

```sh
npm install @fontsource-utils/scss
yarn add @fontsource-utils/scss
pnpm add @fontsource-utils/scss
bun add @fontsource-utils/scss
```

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

### Install CSS Bundle Plugin for Classic Remix Compiler

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

Install the necessary plugin for CSS bundling in Classic Remix projects.

```sh
npm install @remix-run/css-bundle
yarn add @remix-run/css-bundle
pnpm add @remix-run/css-bundle
bun add @remix-run/css-bundle
```

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

### Install Fontsource Package

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

Install your chosen Fontsource font package using npm, yarn, pnpm, or bun.

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

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

### Install Variable Font Package

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

Install the Fontsource variable font package using npm, yarn, pnpm, or bun.

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

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

### Install Fontsource with npm, yarn, pnpm, or bun

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

Use your preferred package manager to install the Fontsource package for Open Sans Variable.

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

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

### Axis Registry Response Example

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

This JSON object illustrates the structure of a response from the Axis Registry endpoint. It shows an example entry for the 'ARRR' axis, detailing its properties.

```json
{
  "...":{
    "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
  },
  "..."
}
```

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

### Query Fontlist API by Subsets

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

Example of querying the Fontlist API to retrieve fonts by their supported subsets. Only one query property can be used at a time.

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

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

### Stats API Response Example

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

This JSON object details the download statistics for a font, including total, static, and variable counts from NPM and jsDelivr.

```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
  }
}
```

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

### Get All Fonts

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

This endpoint retrieves a list of all fonts supported by the Fontsource repository. It accepts a GET request.

```APIDOC
## GET api.fontsource.org/v1/fonts

### Description
Retrieves a list of all fonts supported by the Fontsource repository.

### Method
GET

### Endpoint
/v1/fonts

### Parameters
None

### Request Example
None

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

#### Response Example
{
  "example": "[\n  {\n    \"id\": \"roboto\",\n    \"family\": \"Roboto\",\n    \"subsets\": [\n      \"cyrillic\",\n      \"greek\",\n      \"latin\",\n      \"latin-ext\",\n      \"vietnamese\"\n    ],\n    \"weights\": [\n      100, 300, 400, 500, 700, 900\n    ],\n    \"styles\": [\n      \"italic\",\n      \"normal\"\n    ],\n    \"defSubset\": \"latin\",\n    \"variable\": false,\n    \"lastModified\": \"2023-01-01T00:00:00.000Z\",\n    \"category\": \"sans-serif\"\n  }\n]"
```

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

### Fontlist API Response Example

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

This is an example of the JSON response structure from the Fontlist API. It maps font IDs to their respective types (e.g., 'google', 'icons', 'other').

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

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

### Get All Fonts

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

Retrieve a list of all available fonts from the API.

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

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

### Filter Fonts by Weights and Styles

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

Example of filtering fonts to include specific weights (400, 900) and styles (normal).

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

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

### Query Fontlist API by Family

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

Example of querying the Fontlist API to retrieve fonts by their family name. Only one query property can be used at a time.

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

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

### Get Fonts with Query Parameters

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

Filter the list of fonts by applying query parameters to the request URL.

```http
GET https://api.fontsource.org/v1/fonts?{query}
```

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

### Import Material Icons

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

Import the installed Material Icons font variations into your application's entry file or component. Ensure you have installed the desired packages using your package manager.

```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";
```

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

### Get NPM Version Information

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

Use this endpoint to fetch the latest and historical NPM version data for a specific Fontsource package. The response includes static and variable version details.

```http
GET https://api.fontsource.org/v1/version/{id}
```

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

### Get Package Version Information

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

Fetches the NPM version details for a given Fontsource package ID. This includes the latest static version, a list of all static versions, and optionally the latest and all available variable font versions.

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

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

### Method
GET

### Endpoint
`/v1/version/{id}`

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the Fontsource package (e.g., 'abel', 'open-sans').

### Response
#### Success Response (200)
Returns an object with the following attributes:
- **latest** (string) - The latest static NPM version of the package.
- **static** (string[]) - An array of static NPM versions, sorted from newest to oldest.
- **latestVariable** (string, optional) - The latest variable NPM version of the package.
- **variable** (string[], optional) - An array of variable NPM versions, sorted from 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"
  ]
}
```

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

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

### Font ID API Response Example

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

This JSON object illustrates the structure of the response when querying the Font ID endpoint. It includes all available attributes for a font.

```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"
          }
        }
      }
    }
  }
}
```

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

### Get All Fonts

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

Retrieves a list of all available fonts. This endpoint can be filtered using various query parameters to narrow down the results.

```APIDOC
## GET /v1/fonts

### Description
Retrieves a list of all available fonts. Supports filtering via query parameters.

### Method
GET

### Endpoint
/v1/fonts

### Query Parameters
- **id** (string) - Optional - The font ID.
- **family** (string) - Optional - The font family name.
- **subsets** (string) - Optional - Language subsets (e.g., `latin,latin-ext`).
- **weights** (number[]) - Optional - Font weights (e.g., `400,900`).
- **styles** (string[]) - Optional - Font styles (e.g., `normal,italic`).
- **defSubset** (string) - Optional - The default subset.
- **variable** (boolean) - Optional - Whether the font is variable (e.g., `true`).
- **lastModified** (string) - Optional - Last modified date (e.g., `2020-09-02`).
- **category** (string) - Optional - Font category (e.g., `sans-serif`).
- **version** (string) - Optional - Font version (e.g., `v14`).
- **type** (string) - Optional - Font type (e.g., `google`).

### Response
#### Success Response (200)
- **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) - Indicates if the font is 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"
  }
]
```
```

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

### Filter Fonts by Last Modified Date

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

Example of filtering fonts that were last modified on a specific date.

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

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

### Get Font Stats by ID

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

Retrieves download statistics for a specific font using its ID.

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

### Description
Retrieves download statistics for a specific font identified by its ID.

### Method
GET

### Endpoint
`/v1/stats/{id}`

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the font.

### Response
#### Success Response (200)
- **total** (DownloadStats) - Total download counts.
- **static** (DownloadStats) - Static download counts.
- **variable** (DownloadStats) - Optional. Variable download counts.

#### DownloadStats Object
- **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
  }
}
```

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

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

### Query Fontlist API by Last Modified Date

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

Example of querying the Fontlist API to retrieve fonts based on their last modified date. Only one query property can be used at a time.

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

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

### Import Material Symbols Variable Font Sets

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

Import the entire Material Symbols variable font set for outlined, rounded, and sharp styles. Ensure these packages are installed first.

```jsx
import "@fontsource-variable/material-symbols-outlined";
import "@fontsource-variable/material-symbols-rounded";
import "@fontsource-variable/material-symbols-sharp";
```

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

### Variable Endpoint Response Example

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

This JSON object details the axis data for a variable font, including its family name and specific axis properties like default, min, max, and step.

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

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

### Get Font Details by ID

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

Use this endpoint to fetch detailed information for a specific font. Replace `{id}` with the font's unique identifier.

```http
GET https://api.fontsource.org/v1/fonts/{id}
```

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

### Filter Fonts by Subsets and Variable Status

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

Example of filtering fonts to include specific subsets (latin, latin-ext) and only variable fonts.

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

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

### Apply Imported Font Styles

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

Once imported, apply the font styles to elements using the `font-family` CSS property. This example sets 'Open Sans' as the font for the `body` element.

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

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

### Get Axis Registry

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

Retrieves a comprehensive list of all available variable font axis tags and their associated details.

```APIDOC
## GET https://api.fontsource.org/v1/axis-registry

### Description
Retrieves a JSON object containing details for each variable font axis tag.

### Method
GET

### Endpoint
/v1/axis-registry

### Response
#### Success Response (200)
Returns an object where keys are axis tags (e.g., "ARRR") and values are `AxisRegistryItem` objects.

- **tag** (Record<string, AxisRegistryItem>) - Axis tag object

#### AxisRegistryItem:
- **name** (string) - Axis name
- **description** (string) - Axis description
- **min** (number) - Minimum value possible for axis
- **max** (number) - Maximum value possible for axis
- **default** (number) - Default value for axis
- **precision** (number) - Precision

### Response Example
```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
  }
}
```
```

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

### Get Font List

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

Fetches a JSON object containing a list of fonts and their types. You can optionally query for specific font properties.

```APIDOC
## GET /fontlist

### Description
Retrieves a list of all available fonts and their types.

### Method
GET

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

### Query Parameters
#### Query
- **family** (string) - Optional - Filters by font family names.
- **subsets** (string[]) - Optional - Filters by supported subsets.
- **weights** (number[]) - Optional - Filters by supported weights.
- **styles** (string[]) - Optional - Filters by supported styles.
- **variable** (boolean) - Optional - Filters for variable fonts.
- **category** (string) - Optional - Filters by font category.
- **lastModified** (string) - Optional - Filters by last modified date.
- **version** (string) - Optional - Filters by font version.
- **type** (string) - Optional - Filters by font type (google, icons, other).

**Note:** Only one query parameter can be used at a time.

### Response
#### Success Response (200)
- **{id}** (string) - The font ID.
- **type** (google | icons | other) - The font type.

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

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

### Import Standard Material Symbols Font Sets

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

Import the standard (non-variable) Material Symbols font sets for outlined, rounded, and sharp styles. This is an alternative if variable font support is not needed. Ensure these packages are installed.

```jsx
import "@fontsource/material-symbols-outlined";
import "@fontsource/material-symbols-rounded";
import "@fontsource/material-symbols-sharp";
```

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

### Fetch Stats for a Specific Font

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

Use this HTTP GET request to retrieve download statistics for a particular font by its ID. Replace '{id}' with the font's identifier.

```http
GET https://api.fontsource.org/v1/stats/{id}
```

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

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

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

### Import Specific Material Symbols Variable Font Axes

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

Import specific axes (like fill, opsz, or full) for Material Symbols variable fonts. This allows for more granular control over icon styling. Ensure the corresponding packages are installed.

```jsx
import "@fontsource-variable/material-symbols-outlined/fill.css";
import "@fontsource-variable/material-symbols-rounded/opsz.css";
import "@fontsource-variable/material-symbols-sharp/full.css";
```

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

### Get Font by ID

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

Fetches detailed information about a specific font using its unique ID. This endpoint is useful for retrieving all available metadata for a font, including its variants and file locations.

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

### Description
Retrieves detailed information about a specific font using its unique ID.

### Method
GET

### Endpoint
/v1/fonts/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the font.

### Response
#### Success Response (200)
- **id** (string) - The font ID.
- **family** (string) - The font family name.
- **subsets** (string[]) - An array of language subsets supported by the font.
- **weights** (number[]) - An array of font weights available.
- **styles** (string[]) - An array of font styles available (e.g., 'normal', 'italic').
- **unicodeRange** (Record<string, string>) - An object mapping subsets to their respective Unicode character ranges.
- **defSubset** (string) - The default language subset for the font.
- **variable** (boolean) - Indicates if the font is a variable font.
- **lastModified** (string) - The date when the font was last modified.
- **category** (string) - The font category (e.g., 'sans-serif', 'serif').
- **version** (string) - The version of the font.
- **type** (string) - The type of font source (e.g., 'google', 'local').
- **variants** (Record<string, object>) - An object detailing the available file variants for each weight, style, and subset, including URLs for different 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"
          }
        }
      }
    }
  }
}
```
```

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

### CSS Usage for Open Sans Variable

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

Apply the imported 'Open Sans Variable' font to elements using standard CSS `font-family` property. This example shows usage for an `h1` tag.

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

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

### Configure CSS Bundle Plugin in Remix

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

Configure your `root.tsx` file to use the CSS bundling plugin and import fonts.

```tsx
import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";

import "@fontsource-variable/open-sans/wght.css";

export const links: LinksFunction = () => {
  return [
    ...(cssBundleHref
      ? [{ rel: "stylesheet", href: cssBundleHref }]
      : []),
    // ...
  ];
};
```

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

### Import Specific Open Sans Variations

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

Import specific font weights and styles like 300-weight or 700-weight italic for Open Sans. Use `as` to alias the imported styles for cleaner usage.

```scss
@use "pkg:@fontsource/open-sans/300.css" as OpenSansLight;
```

```scss
@use "pkg:@fontsource/open-sans/700-italic.css" as OpenSansBoldItalic;
```

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

### Import Specific Font Weights and Styles

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

Import only the specific weights and styles needed to minimize bundle size. Each import loads one font file.

```jsx
import "@fontsource/open-sans/300.css"; // Includes weight 300.
```

```jsx
import "@fontsource/open-sans/900-italic.css"; // Includes weight 900 in italic style.
```

```jsx
import "@fontsource/open-sans/900.css"; // Includes weight 900.
```

```jsx
import "@fontsource/open-sans/900-italic.css"; // Includes weight 900 in italic style.
```

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

### Get Variable Font Data

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

Retrieves axis data for a specific variable font by its ID.

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

### Description
Retrieves axis data for a specific variable font.

### Method
GET

### Endpoint
`/v1/variable/{id}`

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the variable font.

### Response
#### Success Response (200)
- **family** (string) - The name of the font family.
- **axes** (Record<string, AxesData>) - An object containing axis data for the font.

##### AxesData
- **default** (number) - The default value for the axis.
- **min** (number) - The minimum value for the axis.
- **max** (number) - The maximum value for the axis.
- **step** (number) - The step value for the axis.

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

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

### Configure Webpack Loaders

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

Add rules to your `webpack.config.js` to process font files and CSS.

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
      {
        test: /\.css$/i,
        use: ["css-loader"],
      },
    ],
  },
};
```

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

### Import Standard Variable Axes CSS Files

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

Import CSS files for standard variable font axes, including italic variations.

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

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

### Preload Open Sans Font with Vite

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

Import the font file URL using Vite's `?url` directive and include a preload link in the HTML head. Avoid preloading all font files to prevent increased initial load times.

```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>
  );
};

```

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

### Import Fontsource Stylesheets using Direct URLs

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

If the pkg: import directive is not usable, import Fontsource stylesheets directly by referencing the CSS file path within your node_modules directory.

```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;
```

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

### Compile Sass with pkg: Importer via Command Line

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

Use the `--pkg-importer=node` flag when compiling Sass files from the command line to enable resolution of pkg: imports.

```sh
sass --pkg-importer=node style.scss style.css
```

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

### Import Font Variant in Qwik Layout

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

Import a chosen font variant into the `routes/layout.tsx` file for global availability. This is the recommended approach for Qwik City projects.

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

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

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

### Import Fontsource Mixins

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

Import the Fontsource generator mixin and the sass:map module to enable dynamic CSS generation.

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

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

### Import Variable Font vs. Static Weights in JSX

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

Use variable fonts to significantly reduce bundle size compared to importing multiple static weights for the same font family.

```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";
```

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

### Configure Sass Compiler with NodePackageImporter in JavaScript

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

When using the JavaScript API, instantiate `NodePackageImporter()` and pass it to the `importers` option to resolve pkg: imports.

```js
const sass = require('sass');

sass.compileString('@use "pkg:@fontsource-variable/roboto', {
  importers: [new sass.NodePackageImporter()]
});
```

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

### Import All Open Sans Styles

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

Use the `@use` rule to import all CSS stylesheets for the Open Sans font. Ensure your Sass compiler is configured with `NodePackageImporter()` to resolve the `pkg:` prefix.

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

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

### Import Default Variable Font

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

Import the standard weight of the variable font into your project.

```jsx
// Supports weights 200-1000 in a single small file.
import "@fontsource-variable/nunito-sans";
```

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

### Import Specific Font Subsets with Fontsource

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

Import individual font subsets like 'latin', 'latin-ext' with specific weights and styles. This method is not available for variable fonts and is generally not recommended over the default CSS.

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

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

### Generate Basic Font Faces

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

Use the faces mixin with specific subsets, weights, and styles to generate CSS for a font variation.

```scss
@include fontsource.faces(
  $metadata: recursive.$metadata,
  $subsets: latin,
  $weights: 500,
  $styles: italic
);
```

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

### Import All Available Variable Axes

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

Import CSS files that include all available standard and custom axes for a variable font, including italic variations.

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

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

### Generate Font Faces with Multiple Options

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

Customize font variations by specifying multiple subsets, weights, and using 'all' for all available styles.

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

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

### Import Specific Font Weights in JSX

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

Import only the specific weights and styles of a font that you actually use to optimize bundle size.

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

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

### Import Font in Global CSS File

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

Import font CSS into a global CSS file and then import that CSS file into your Svelte layout. This method centralizes global styles.

```css
@import '@fontsource-variable/inter/wght.css';

body {
  font-family: 'Inter Variable', sans-serif;
  margin: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 600;
}
```

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

<main>
  <slot />
</main>
```

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

### Update `metadata.json` License Structure

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

The `license` property in `metadata.json` has changed from a string to an object. Update your `metadata.json` files to include the new `type`, `url`, and `attribution` fields.

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

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

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

### Import Individual Standard Variable Axes

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

Import specific standard variable font axes like weight, width, slant, optical size, and italic.

```jsx
import "@fontsource-variable/nunito-sans/wght.css";
import "@fontsource-variable/nunito-sans/wdth-italic.css";
import "@fontsource-variable/nunito-sans/opsz.css";
```

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

### Apply Font to Global Styles

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

Set the 'Open Sans Variable' font family as the default for the entire application by adding it to your global styles.css file.

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

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

### Import Font in Root Layout (Svelte)

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

Import font CSS directly into your root Svelte layout file for application-wide availability. Ensure the font-family is set globally in your styles.

```html
<script>
  import '@fontsource-variable/inter/wght.css';
</script>

<main>
  <slot />
</main>

<style>
  :global(body) {
    font-family: 'Inter Variable', sans-serif;
    margin: 0;
  }

  :global(h1, h2, h3, h4, h5, h6) {
    font-family: 'Inter Variable', sans-serif;
    font-weight: 600;
  }
</style>
```

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

### Default Font Import

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

Import a font package directly to include the most common weight (usually 400).

```jsx
import "@fontsource/open-sans"; // Defaults to weight 400.
```

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

### Import Font CSS with Vite Compiler

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

Import the font's CSS file directly into your `root.tsx` file when using the Vite compiler. Ensure the `.css` extension is included.

```tsx
import "@fontsource-variable/open-sans/wght.css";
```

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

### Configure Global Fontsource Defaults

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

Set global defaults for Fontsource mixin arguments like weights and family name by configuring the module import. These defaults can be overridden by specific mixin arguments.

```scss
@use "@fontsource-utils/scss" as fontsource with (
  $weights: (
    300,
    700,
  ),
  $family: "Fontsource Custom"
);

@include fontsource.faces(
  $metadata: recursive.$metadata
  // The global configuration can still be overwritten through arguments
  $family: "Recursive Other"
);
```

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

### Generator Mixin Usage with Faces Mixin

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

Demonstrates how the faces mixin passes its arguments to the generator mixin, which then generates CSS based on the provided properties. This is useful for dynamically creating font-face rules.

```scss
@include generator(
    // Faces mixin arguments are passed down to the generator
    $metadata: $metadata,
    $directory: $directory,
    $family: $family,
    $display: $display,
    $formats: $formats,
    $subsets: $subsets,
    $weights: $weights,
    $styles: $styles,
    $axes: $axes
  ) using ($props) {
  /* #{map.get($props, variant)} */
  @font-face {
    font-family: map.get($props, font-family);
    font-style: map.get($props, font-style);
    font-display: map.get($props, font-display);
    font-weight: map.get($props, font-weight);
    font-stretch: map.get($props, font-stretch);
    unicode-range: map.get($props, unicode-range);
    src: map.get($props, src);
  }
}
```

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

### Apply Font to Global Styles

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

Set the font family in your global styles.css file for application-wide font usage.

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

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

### Accessing Generator Mixin Properties

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

Demonstrates how to access resolved mixin arguments like weights and family within the generator's content block using the $props map.

```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 */
}
```

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

### Import Fontsource CSS in Vue.js Entry Point

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

Import Fontsource CSS files directly into your Vue.js application's main entry file. Ensure your bundler is configured to handle CSS imports.

```javascript
import { createApp } from "vue";

import "@fontsource-variable/open-sans/wght.css";

import App from "./App.vue";

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

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

### Import Individual Custom Variable Axes

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

Import individual custom variable font axes such as gradient, italic, and extra width.

```jsx
import "@fontsource-variable/nunito-sans/grad.css";
import "@fontsource-variable/nunito-sans/ytuc.css";
import "@fontsource-variable/nunito-sans/xtra.css";
```

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

### Update Sass Integration for Fontsource

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

The Sass integration has been rewritten. Use the new `OpenSans.faces` mixin with updated parameters for importing fonts.

```scss
@include OpenSans.fontFace(
  $weight: 500,
  $display: fallback,
  $fontDir: "~@fontsource/open-sans/files"
);
```

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

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

### Import Font at Component Level (Svelte)

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

Import fonts into specific Svelte components or routes to leverage code splitting. This is useful for fonts only needed in certain parts of your application.

```html
<!-- src/routes/blog/+layout.svelte -->
<script>
  import '@fontsource/playfair-display/700.css';
  import '@fontsource-variable/inter/wght.css';
</script>

<article>
  <slot />
</article>

<style>
  article :global(h1) {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
  }

  article :global(p) {
    font-family: 'Inter Variable', sans-serif;
    font-weight: 400;
  }
</style>
```

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

### Import Specific Variable Font Variation

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

Import a specific CSS file for a particular weight or style variation of the variable font.

```jsx
// Supports weights 200-1000 in italic style.
import "@fontsource-variable/nunito-sans/wght-italic.css";
```

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

### Import Fontsource Font

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

Import the Fontsource font CSS file into your application's entry point or a component.

```javascript
import "@fontsource-variable/open-sans/wght.css";
// You should be able to import other CSS files too
import "./styles.css"

// Your application code goes here
```

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

### Control Variable Font Properties with CSS

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

Use CSS custom properties or `font-variation-settings` to control specific properties like weight for variable fonts.

```css
.heading {
  font-family: "Open Sans Variable", sans-serif;
  font-weight: 600;
  /* Or use variation settings directly */
  font-variation-settings: "wght" 600;
}
```

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

### Import Fontsource Mixins

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

Import the Fontsource mixins and the specific font package's SCSS variables into your Sass/SCSS file.

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

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

### Use Generator Mixin for Dynamic CSS

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

Utilize the generator mixin to dynamically create @font-face rules based on specified font weights and other properties passed via the $props map.

```scss
@include fontsource.generator(
  $weights: (
    400,
    800,
  )
) using ($props) {
  /* CSS generated dynamically based on the properties */
  @font-face {
    font-family: "Random stuff #{map.get($props, font-family)}";
    font-style: normal;
    font-weight: map.get($props, font-weight);
    src: map.get($props, src);
  }
}
```