CDN

Fontsource has partnered with jsDelivr 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.

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

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, you can access its import generator to generate the relevant URLs and CSS necessary for your project.

URL Formats

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

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

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:

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

html

Load only the minified Latin subset:

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

html

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

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

html

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 fonts URLs have the format:

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

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