How to host fonts on a CDN: step‑by‑step guide.
By Jeff Carey, Sr. Principal Software Engineer and Developer Relations Lead
Hosting fonts on a Content Delivery Network (CDN) enhances your website’s performance, scalability, and reliability by serving font files from servers located closer to your users. Whether you’re a designer managing brand assets or a developer optimizing web performance, this guide walks through each step of setting up, configuring, and maintaining fonts on a CDN—while ensuring licensing compliance and a consistent user experience.
This article is just a summary; check out our GitHub for more detail.
Understanding font hosting on a CDN
A CDN, or Content Delivery Network, is a globally distributed system of servers that caches and delivers web assets—including fonts—from locations geographically closest to each user. This reduces latency and minimizes page load times.
CDN font hosting allows your typography to render faster worldwide by reducing the distance between the user’s browser and your font files. Compared with local hosting, CDNs offer:
- Faster global load speeds and consistent uptime.
- Optimized bandwidth usage and reduced load on your origin server.
- Improved Core Web Vitals through more efficient font rendering and caching.
For large brands and platforms, CDN‑based web font delivery supports seamless, scalable experiences across every digital touchpoint.
Step 1: Verify font licensing and reporting requirements
Before uploading fonts anywhere, confirm that your font license explicitly allows CDN hosting and web embedding. Many commercial fonts—especially those used for brand identity—have specific requirements for how they are distributed and reported.
Monotype web font licenses, for example, may include usage reporting to ensure continued compliance with the terms of use. Some foundries restrict or require special authorization for CDN hosting.
License Type | CDN Allowed? | Reporting Needed? |
Standard Web | Often | Sometimes |
Monotype Web | Yes | Yes |
Desktop | No | No |
Confirming these details early helps prevent compliance or configuration issues later.
Step 2: Prepare and optimize font files for CDN delivery
Before uploading, optimize your font files to reduce load time and improve performance. The most effective approach is to serve your fonts in WOFF2 format—the industry standard for web compression—offering roughly 30% smaller file sizes than WOFF.
Subset your fonts to include only the characters and styles your site needs. Removing unused glyphs, weights, and extensions further reduces file size and speeds up delivery.
A clean, optimized font kit should include:
- WOFF2 (primary format)
- WOFF/TTF (fallback for older browsers)
This preparation ensures fast, efficient CDN delivery while maintaining typographic quality.
Step 3: Upload fonts to your chosen CDN
Next, select a CDN provider that fits your scale, budget, and performance needs.
CDN Type | Pros | Cons |
Commercial (Monotype, Cloudflare, CloudFront, BunnyCDN) | Reliable performance, custom controls, compression options | Cost, setup complexity |
GitHub + jsDelivr | Free and simple public hosting | Limited privacy, less control |
Fontsource CDN | Easy versioning, stable links | Limited font selection |
For commercial networks such as Monotype, Cloudflare, or CloudFront, upload font files to your storage bucket (for instance, AWS S3) and point CDN distributions to those assets. For jsDelivr, host fonts in a public GitHub repository. Each method supports secure, scalable delivery across all your properties.
Step 4: Configure CDN caching and compression settings
Caching and compression are critical for speed and consistent rendering. Caching stores font files both at CDN edge servers and in the user’s browser, allowing repeat visits to load instantly.
Follow these configuration guidelines:
- Set long Time‑to‑Live (TTL) values with hashed filenames—for example, one year for edge and browser caches.
- Enable compression (Gzip or Brotli) for font MIME types such as font/woff2 or application/font-woff.
- Re‑deploy when file hashes change to ensure browsers always receive updated versions.
Aggressive caching with hashed filenames ensures near‑instant delivery and simple version control.
Step 5: Set up CORS headers and test cross‑origin access
Cross‑Origin Resource Sharing (CORS) allows browsers to load fonts from domains different from your site’s origin. Without proper CORS headers, browsers can block your fonts, displaying blank boxes or fallback glyphs.
Add the correct header to your CDN configuration:
Access-Control-Allow-Origin: * or, for more control, specify your domain.
Check your CDN’s documentation for where to apply these headers:
- Cloudflare: via Transform Rules or Workers.
- CloudFront: through origin response header policies.
- S3: by updating bucket policy XML.
After setup, test across browsers and clear caches to verify consistency.
CORS setup checklist:
- Access-Control-Allow-Origin set correctly
- Test fonts in multiple browsers
- Invalidate CDN cache after updates
Step 6: Implement cache busting with hashed filenames
Cache busting ensures users receive updated font files even when browsers cache older versions.
Add a unique content hash to each updated file name, such as brand-sans-regular.a1b2c3.woff2. This lets CDNs and browsers store fonts long‑term while instantly serving the latest version when hashes change.
After renaming, update all @font-face CSS references accordingly. Hashed filenames provide efficient version tracking without manual cache clearing.
Step 7: Add resource hints for optimal font loading
Resource hints tell browsers which resources to prioritize. For CDN‑hosted fonts, proper hints can boost speed and stability.
Add a preconnect hint to your CDN domain to establish an early network connection:
`<link rel=
Combined with targeted preload and sensible font-display settings, these hints minimize blocking and help fonts render quickly and consistently across devices.
Hosting fonts on a CDN improves performance, scalability, and reliability across your digital properties. To ensure a fast and compliant setup, verify licensing and reporting requirements, optimize and subset fonts (prefer WOFF2), upload to a suitable CDN, configure long‑lived caching and compression, set CORS headers and test across browsers, use hashed filenames for cache busting, and add resource hints to prioritize font loading. Following these steps helps deliver consistent typography, better Core Web Vitals, and a stable user experience worldwide.
