# CDN [#cdn]

Fontsource has partnered with [jsDelivr](https://www.jsdelivr.com/) for a custom proxy for its stylesheets and font files, allowing for niche use cases where a stable asset link is required. All files are versioned according to [Semver](https://semver.org/).

> **Note:** We recommend self-hosting your fonts if possible, but we understand there are suitable use cases for a CDN.

## Usage [#usage]

To leverage the Fontsource CDN for your project, you can use the import generator provided on the install page of each font. For example, to use [Roboto Flex](/fonts/roboto-flex/cdn), you can access its import generator to generate the relevant URLs and CSS necessary for your project.

## URL Formats [#url-formats]

The Fontsource CDN serves generated CSS stylesheets and direct font files.

### Choosing a Version [#choosing-a-version]

Use an exact version such as `@5.2.7` in production. Exact versions are immutable and receive long-lived caching, making deployments reproducible without query-string cache busters. Update the version in the URL when you want to upgrade the font.

Floating versions such as `@latest`, `@5`, or `@5.2` automatically resolve to a matching release. They use shorter caches and may not update immediately, so use them only when automatic upgrades are intentional. A floating stylesheet still contains exact-version font file URLs, keeping all files in that stylesheet on the same release.

### CSS Stylesheets [#css-stylesheets]

Generated stylesheets include the matching `@font-face` declarations and font file URLs. Use `.min.css` instead of `.css` when you want the minified version.

* Static: `https://cdn.jsdelivr.net/fontsource/css/{id}@{version}/{file}.css`
* Variable: `https://cdn.jsdelivr.net/fontsource/css/{id}:vf@{version}/{file}.css`

For example, load the default Open Sans stylesheet:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/css/open-sans@5.2.7/index.css" />
```

Load only the minified Latin subset:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/css/open-sans@5.2.7/latin.min.css" />
```

Variable font stylesheets use the same `.min.css` suffix:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/css/roboto-flex:vf@5.0.8/index.min.css" />
```

### Static Font URLs [#static-font-urls]

Static font URLs follow this pattern:

* `https://cdn.jsdelivr.net/fontsource/fonts/{id}@{version}/{subset}-{weight}-{style}.{extension}`

### Variable Font URLs [#variable-font-urls]

Variable fonts URLs have the format:

* `https://cdn.jsdelivr.net/fontsource/fonts/{id}:vf@{version}/{subset}-{axes}-{style}.woff2`

## Example URLs [#example-urls]

Here are some example URLs that demonstrate how to use Fontsource’s CDN with different fonts and configurations:

* Floating variable URL for the latest version of Roboto Flex with Latin subset, wght axis, and normal style: `https://cdn.jsdelivr.net/fontsource/fonts/roboto-flex:vf@latest/latin-wght-normal.woff2`

* Variable URL for Roboto Flex version 5.0.8 with Cyrillic Extended subset, normal weight, and normal style: `https://cdn.jsdelivr.net/fontsource/fonts/roboto-flex:vf@5.0.8/cyrillic-ext-wdth-normal.woff2`

* Static URL for Inter version 5.0 with Vietnamese subset, 500 weight, and normal style: `https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0/vietnamese-500-normal.woff2`

* Static URL for Inter version 5 with Greek Extended subset, 400 weight, and italic style: `https://cdn.jsdelivr.net/fontsource/fonts/inter@5/greek-ext-400-italic.woff2`