https://fontsource.org/assets/cdn-DkUOZBhE.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._posthogChunkIds=e._posthogChunkIds||{},e._posthogChunkIds[n]="01a0cd05-6e9f-7da3-b99a-88d71b531e75")}catch(e){}}();import{t as e}from"./jsx-runtime-Cmd40i93.js";var s=e(),t={title:"CDN",description:"Load versioned Fontsource stylesheets and font files through the jsDelivr CDN."},n='\n\n# CDN [#cdn]\n\nFontsource 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/).\n\n> **Note:** We recommend self-hosting your fonts if possible, but we understand there are suitable use cases for a CDN.\n\n## Usage [#usage]\n\nTo use the Fontsource CDN, open **Developer setup** on a font’s **Get font** page and choose **CDN**. For example, [Roboto Flex](/fonts/roboto-flex/use?tab=web\\&method=cdn) generates the relevant URLs and CSS for your project.\n\n## URL Formats [#url-formats]\n\nThe Fontsource CDN serves generated CSS stylesheets and direct font files.\n\n### Choosing a Version [#choosing-a-version]\n\nUse 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.\n\nFloating 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.\n\n### CSS Stylesheets [#css-stylesheets]\n\nGenerated stylesheets include the matching `@font-face` declarations and font file URLs. Use `.min.css` instead of `.css` when you want the minified version.\n\n* Static: `https://cdn.jsdelivr.net/fontsource/css/{id}@{version}/{file}.css`\n* Variable: `https://cdn.jsdelivr.net/fontsource/css/{id}:vf@{version}/{file}.css`\n\nFor example, load the default Open Sans stylesheet:\n\n```html\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/css/[email protected]/index.css" />\n```\n\nLoad only the minified Latin subset:\n\n```html\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/css/[email protected]/latin.min.css" />\n```\n\nVariable font stylesheets use the same `.min.css` suffix:\n\n```html\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/css/roboto-flex:[email protected]/index.min.css" />\n```\n\n### Static Font URLs [#static-font-urls]\n\nStatic font URLs follow this pattern:\n\n* `https://cdn.jsdelivr.net/fontsource/fonts/{id}@{version}/{subset}-{weight}-{style}.{extension}`\n\n### Variable Font URLs [#variable-font-urls]\n\nVariable fonts URLs have the format:\n\n* `https://cdn.jsdelivr.net/fontsource/fonts/{id}:vf@{version}/{subset}-{axes}-{style}.woff2`\n\n## Example URLs [#example-urls]\n\nHere are some example URLs that demonstrate how to use Fontsource’s CDN with different fonts and configurations:\n\n* 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`\n\n* 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:[email protected]/cyrillic-ext-wdth-normal.woff2`\n\n* Static URL for Inter version 5.0 with Vietnamese subset, 500 weight, and normal style: `https://cdn.jsdelivr.net/fontsource/fonts/[email protected]/vietnamese-500-normal.woff2`\n\n* 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`\n',i={contents:[{heading:"cdn",content:"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."},{heading:"cdn",content:"> **Note:** We recommend self-hosting your fonts if possible, but we understand there are suitable use cases for a CDN."},{heading:"usage",content:"To use the Fontsource CDN, open **Developer setup** on a font's **Get font** page and choose **CDN**. For example, Roboto Flex generates the relevant URLs and CSS for your project."},{heading:"url-formats",content:"The Fontsource CDN serves generated CSS stylesheets and direct font files."},{heading:"choosing-a-version",content:"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 buster

1s. Update the version in the URL when you want to upgrade the font."},{heading:"choosing-a-version",content:"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."},{heading:"css-stylesheets",content:"Generated stylesheets include the matching `@font-face` declarations and font file URLs. Use `.min.css` instead of `.css` when you want the minified version."},{heading:"css-stylesheets",content:"Static: `https://cdn.jsdelivr.net/fontsource/css/{id}@{version}/{file}.css`"},{heading:"css-stylesheets",content:"Variable: `https://cdn.jsdelivr.net/fontsource/css/{id}:vf@{version}/{file}.css`"},{heading:"css-stylesheets",content:"For example, load the default Open Sans stylesheet:"},{heading:"css-stylesheets",content:"Load only the minified Latin subset:"},{heading:"css-stylesheets",content:"Variable font stylesheets use the same `.min.css` suffix:"},{heading:"static-font-urls",content:"Static font URLs follow this pattern:"},{heading:"static-font-urls",content:"`https://cdn.jsdelivr.net/fontsource/fonts/{id}@{version}/{subset}-{weight}-{style}.{extension}`"},{heading:"variable-font-urls",content:"Variable fonts URLs have the format:"},{heading:"variable-font-urls",content:"`https://cdn.jsdelivr.net/fontsource/fonts/{id}:vf@{version}/{subset}-{axes}-{style}.woff2`"},{heading:"example-urls",content:"Here are some example URLs that demonstrate how to use Fontsource's CDN with different fonts and configurations:"},{heading:"example-urls",content:"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`"},{heading:"example-urls",content:"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:[email protected]/cyrillic-ext-wdth-normal.woff2`"},{heading:"example-urls",content:"Static URL for Inter version 5.0 with Vietnamese subset, 500 weight, and normal style: `https://cdn.jsdelivr.net/fontsource/fonts/[email protected]/vietnamese-500-normal.woff2`"},{heading:"example-urls",content:"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`"}],headings:[{id:"cdn",content:"CDN"},{id:"usage",content:"Usage"},{id:"url-formats",content:"URL Formats"},{id:"choosing-a-version",content:"Choosing a Version"},{id:"css-stylesheets",content:"CSS Stylesheets"},{id:"static-font-urls",content:"Static Font URLs"},{id:"variable-font-urls",content:"Variable Font URLs"},{id:"example-urls",content:"Example URLs"}]},o=[{depth:1,url:"#cdn",title:(0,s.jsx)(s.Fragment,{children:"CDN"})},{depth:2,url:"#usage",title:(0,s.jsx)(s.Fragment,{children:"Usage"})},{depth:2,url:"#url-formats",title:(0,s.jsx)(s.Fragment,{children:"URL Formats"})},{depth:3,url:"#choosing-a-version",title:(0,s.jsx)(s.Fragment,{children:"Choosing a Version"})},{depth:3,url:"#css-stylesheets",title:(0,s.jsx)(s.Fragment,{children:"CSS Stylesheets"})},{depth:3,url:"#static-font-urls",title:(0,s.jsx)(s.Fragment,{children:"Static Font URLs"})},{depth:3,url:"#variable-font-urls",title:(0,s.jsx)(s.Fragment,{children:"Variable Font URLs"})},{depth:2,url:"#example-urls",title:(0,s.jsx)(s.Fragment,{children:"Example URLs"})}];function r(e){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"cdn",children:"CDN"}),"\n",(0,s.jsxs)(t.p,{children:["Fontsource has partnered with ",(0,s.jsx)(t.a,{href:"https://www.jsdelivr.com/",children:"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 ",(0,s.jsx)(t.a,{href:"https://semver.org/",children:"Semver"}),"."]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Note:"})," We recommend self-hosting your fonts if possible, but we understand there are suitable use cases for a CDN."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsxs)(t.p,{children:["To use the Fontsource CDN, open ",(0,s.jsx)(t.strong,{children:"Developer setup"})," on a font’s ",(0,s.jsx)(t.strong,{children:"Get font"})," page and choose ",(0,s.jsx)(t.strong,{children:"CDN"}),". For example, ",(0,s.jsx)(t.a,{href:"/fonts/roboto-flex/use?tab=web&method=cdn",children:"Roboto Flex"})," generates the relevant URLs and CSS for your project."]}),"\n",(0,s.jsx)(t.h2,{id:"url-formats",children:"URL Formats"}),"\n",(0,s.jsx)(t.p,{children:"The Fontsource CDN serves generated CSS stylesheets and direct font files."}),"\n",(0,s.jsx)(t.h3,{id:"choosing-a-version",children:"Choosing a Version"}),"\n",(0,s.jsxs)(t.p,{children:["Use an exact version such as ",(0,s.jsx)(t.code,{children:"@5.2.7"})," in production. Exact versions are immutable and receive long-lived caching, making deployments reproducible without query-string cache buster

1s. Update the version in the URL when you want to upgrade the font."]}),"\n",(0,s.jsxs)(t.p,{children:["Floating versions such as ",(0,s.jsx)(t.code,{children:"@latest"}),", ",(0,s.jsx)(t.code,{children:"@5"}),", or ",(0,s.jsx)(t.code,{children:"@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."]}),"\n",(0,s.jsx)(t.h3,{id:"css-stylesheets",children:"CSS Stylesheets"}),"\n",(0,s.jsxs)(t.p,{children:["Generated stylesheets include the matching ",(0,s.jsx)(t.code,{children:"@font-face"})," declarations and font file URLs. Use ",(0,s.jsx)(t.code,{children:".min.css"})," instead of ",(0,s.jsx)(t.code,{children:".css"})," when you want the minified version."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Static: ",(0,s.jsx)(t.code,{children:"https://cdn.jsdelivr.net/fontsource/css/{id}@{version}/{file}.css"})]}),"\n",(0,s.jsxs)(t.li,{children:["Variable: ",(0,s.jsx)(t.code,{children:"https://cdn.jsdelivr.net/fontsource/css/{id}:vf@{version}/{file}.css"})]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"For example, load the default Open Sans stylesheet:"}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(t.pre,{className:"shiki shiki-themes fontsource fontsource",style:{"--shiki-light":"#c2bfff","--shiki-dark":"#c2bfff","--shiki-light-bg":"#01112c","--shiki-dark-bg":"#01112c"},tabIndex:"0",icon:'<svg viewBox="0 0 24 24"><path d="M 6,1 C 4.354992,1 3,2.354992 3,4 v 16 c 0,1.645008 1.354992,3 3,3 h 12 c 1.645008,0 3,-1.354992 3,-3 V 8 7 A 1.0001,1.0001 0 0 0 20.707031,6.2929687 l -5,-5 A 1.0001,1.0001 0 0 0 15,1 h -1 z m 0,2 h 7 v 3 c 0,1.645008 1.354992,3 3,3 h 3 v 11 c 0,0.564129 -0.435871,1 -1,1 H 6 C 5.4358712,21 5,20.564129 5,20 V 4 C 5,3.4358712 5.4358712,3 6,3 Z M 15,3.4140625 18.585937,7 H 16 C 15.435871,7 15,6.5641288 15,6 Z" fill="currentColor" /></svg>',children:(0,s.jsx)(t.code,{className:"language-html",children:(0,s.jsxs)(t.span,{className:"line",children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"<"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:"link"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#8B83FF","--shiki-dark":"#8B83FF"},children:" rel"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:'"stylesheet"'}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#8B83FF","--shiki-dark":"#8B83FF"},children:" href"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:'"https://cdn.jsdelivr.net/fontsource/css/[email protected]/index.css"'}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:" />"})]})})})}),"\n",(0,s.jsx)(t.p,{children:"Load only the minified Latin subset:"}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(t.pre,{className:"shiki shiki-themes fontsource fontsource",style:{"--shiki-light":"#c2bfff","--shiki-dark":"#c2bfff","--shiki-light-bg":"#01112c","--shiki-dark-bg":"#01112c"},tabIndex:"0",icon:'<svg viewBox="0 0 24 24"><path d="M 6,1 C 4.354992,1 3,2.354992 3,4 v 16 c 0,1.645008 1.354992,3 3,3 h 12 c 1.645008,0 3,-1.354992 3,-3 V 8 7 A 1.0001,1.0001 0 0 0 20.707031,6.2929687 l -5,-5 A 1.0001,1.0001 0 0 0 15,1 h -1 z m 0,2 h 7 v 3 c 0,1.645008 1.354992,3 3,3 h 3 v 11 c 0,0.564129 -0.435871,1 -1,1 H 6 C 5.4358712,21 5,20.564129 5,20 V 4 C 5,3.4358712 5.4358712,3 6,3 Z M 15,3.4140625 18.585937,7 H 16 C 15.435871,7 15,6.5641288 15,6 Z" fill="currentColor" /></svg>',children:(0,s.jsx)(t.code,{className:"language-html",children:(0,s.jsxs)(t.span,{className:"line",children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"<"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:"link"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#8B83FF","--shiki-dark":"#8B83FF"},children:" rel"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:'"stylesheet"'}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#8B83FF","--shiki-dark":"#8B83FF"},children:" href"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:'"https://cdn.jsdelivr.net/fontsource/css/[email protected]/latin.min.css"'}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:" />"})]})})})}),"\n",(0,s.jsxs)(t.p,{children:["Variable font stylesheets use the same ",(0,s.jsx)(t.code,{children:".min.css"})," suffix:"]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(t.pre,{className:"shiki shiki-themes fontsource fontsource",style:{"--shiki-light":"#c2bfff","--shiki-dark":"#c2bfff","--shiki-light-bg":"#01112c","--shiki-dark-bg":"#01112c"},tabIndex:"0",icon:'<svg viewBox="0 0 24 24">

1<path d="M 6,1 C 4.354992,1 3,2.354992 3,4 v 16 c 0,1.645008 1.354992,3 3,3 h 12 c 1.645008,0 3,-1.354992 3,-3 V 8 7 A 1.0001,1.0001 0 0 0 20.707031,6.2929687 l -5,-5 A 1.0001,1.0001 0 0 0 15,1 h -1 z m 0,2 h 7 v 3 c 0,1.645008 1.354992,3 3,3 h 3 v 11 c 0,0.564129 -0.435871,1 -1,1 H 6 C 5.4358712,21 5,20.564129 5,20 V 4 C 5,3.4358712 5.4358712,3 6,3 Z M 15,3.4140625 18.585937,7 H 16 C 15.435871,7 15,6.5641288 15,6 Z" fill="currentColor" /></svg>',children:(0,s.jsx)(t.code,{className:"language-html",children:(0,s.jsxs)(t.span,{className:"line",children:[(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"<"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:"link"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#8B83FF","--shiki-dark":"#8B83FF"},children:" rel"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:'"stylesheet"'}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#8B83FF","--shiki-dark":"#8B83FF"},children:" href"}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:"="}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#EFF5FE","--shiki-dark":"#EFF5FE"},children:'"https://cdn.jsdelivr.net/fontsource/css/roboto-flex:[email protected]/index.min.css"'}),(0,s.jsx)(t.span,{style:{"--shiki-light":"#7C86A3","--shiki-dark":"#7C86A3"},children:" />"})]})})})}),"\n",(0,s.jsx)(t.h3,{id:"static-font-urls",children:"Static Font URLs"}),"\n",(0,s.jsx)(t.p,{children:"Static font URLs follow this pattern:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"https://cdn.jsdelivr.net/fontsource/fonts/{id}@{version}/{subset}-{weight}-{style}.{extension}"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"variable-font-urls",children:"Variable Font URLs"}),"\n",(0,s.jsx)(t.p,{children:"Variable fonts URLs have the format:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"https://cdn.jsdelivr.net/fontsource/fonts/{id}:vf@{version}/{subset}-{axes}-{style}.woff2"})}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"example-urls",children:"Example URLs"}),"\n",(0,s.jsx)(t.p,{children:"Here are some example URLs that demonstrate how to use Fontsource’s CDN with different fonts and configurations:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Floating variable URL for the latest version of Roboto Flex with Latin subset, wght axis, and normal style: ",(0,s.jsx)(t.code,{children:"https://cdn.jsdelivr.net/fontsource/fonts/roboto-flex:vf@latest/latin-wght-normal.woff2"})]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Variable URL for Roboto Flex version 5.0.8 with Cyrillic Extended subset, normal weight, and normal style: ",(0,s.jsx)(t.code,{children:"https://cdn.jsdelivr.net/fontsource/fonts/roboto-flex:[email protected]/cyrillic-ext-wdth-normal.woff2"})]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Static URL for Inter version 5.0 with Vietnamese subset, 500 weight, and normal style: ",(0,s.jsx)(t.code,{children:"https://cdn.jsdelivr.net/fontsource/fonts/[email protected]/vietnamese-500-normal.woff2"})]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Static URL for Inter version 5 with Greek Extended subset, 400 weight, and italic style: ",(0,s.jsx)(t.code,{children:"https://cdn.jsdelivr.net/fontsource/fonts/inter@5/greek-ext-400-italic.woff2"})]}),"\n"]}),"\n"]})]})}function l(e={}){const{wrapper:t}=e.components||{};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(r,{...e})}):r(e)}

1export{n as _markdown,l as default,t as frontmatter,i as structuredData,o as toc};
2//# chunkId=01a0cd05-6e9f-7da3-b99a-88d71b531e75