Font Converter

CDN Font Setup Guide

Configure fonts on Content Delivery Networks for optimal global performance. Learn caching strategies, CORS configuration, and best practices for Cloudflare, AWS CloudFront, and other CDN providers.

TL;DR - Key Takeaways

  • • Set Cache-Control with max-age of 1 year for versioned font files
  • • Configure CORS headers: Access-Control-Allow-Origin for cross-domain usage
  • • Use immutable cache directive for hashed/versioned font filenames
  • • Preconnect to CDN domain for faster font loading

Share this page to:

LinkedInReddit

A Content Delivery Network (CDN) serves your fonts from edge servers located around the world, dramatically reducing latency for global users. While you could self-host fonts from your origin server, a CDN ensures that a user in Tokyo loads fonts from a nearby server rather than waiting for a round-trip to your server in the US.

This guide covers configuring fonts on major CDN providers, setting optimal cache headers, handling CORS for cross-origin font loading, and performance optimization techniques that improve Core Web Vitals scores.

The key challenges with CDN font hosting are ensuring proper cache invalidation when fonts update, configuring CORS headers correctly for cross-domain requests, and balancing cache duration with the ability to push updates.

Why Use a CDN for Fonts?

CDN benefits for font delivery go beyond simple caching.

Reduced Latency

Edge servers serve fonts from locations closer to users. A font request from Europe hits a European edge server instead of your US origin.

HTTP/2 & HTTP/3

Modern CDNs support HTTP/2 and HTTP/3 with multiplexing, allowing multiple font files to download over a single connection.

Compression

CDNs handle Brotli compression automatically. WOFF2 is already compressed, but CSS files benefit from additional compression.

Origin Offloading

Font requests are served from CDN cache, reducing load on your origin server and improving overall site reliability.

Cloudflare Configuration

Cloudflare is one of the most popular CDN choices with a generous free tier. Here's how to optimize font delivery.

Cache Rules for Fonts

Create a Cache Rule in Cloudflare Dashboard to maximize font caching.

Match: URI Path contains /fonts/

Cache eligibility: Eligible for cache

Edge TTL: 1 year

Browser TTL: 1 year

Response Headers

Add response headers via Transform Rules or Workers.

// Cloudflare Worker for font headers
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const response = await fetch(request)
  const headers = new Headers(response.headers)

  if (request.url.includes('/fonts/')) {
    headers.set('Cache-Control',
      'public, max-age=31536000, immutable')
    headers.set('Access-Control-Allow-Origin', '*')
  }

  return new Response(response.body, {
    status: response.status,
    headers
  })
}

AWS CloudFront Setup

CloudFront paired with S3 provides enterprise-grade font delivery.

S3 Bucket Configuration

// S3 Bucket CORS Configuration
{
  "CORSRules": [
    {
      "AllowedOrigins": ["https://yourdomain.com"],
      "AllowedMethods": ["GET", "HEAD"],
      "AllowedHeaders": ["*"],
      "ExposeHeaders": [],
      "MaxAgeSeconds": 86400
    }
  ]
}

CloudFront Cache Behavior

Create a cache behavior for the /fonts/* path pattern.

Cache Policy:

CachingOptimized

Compress Objects:

Yes

TTL Settings:

Min 86400, Max 31536000

Response Headers Policy:

CORS-with-preflight

CORS Headers for Fonts

Browsers require CORS headers for fonts loaded from different origins. Without proper CORS, fonts will fail to load.

Common CORS Error

Access to font at 'https://cdn.example.com/fonts/Inter.woff2' from origin 'https://example.com' has been blocked by CORS policy

Required Headers

# For fonts served from CDN subdomain
Access-Control-Allow-Origin: https://yourdomain.com

# For fonts used by multiple domains (less secure)
Access-Control-Allow-Origin: *

# Recommended additional headers
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Max-Age: 86400

Same-Origin Fonts

If fonts are served from the same domain (yourdomain.com/fonts/), no CORS headers are needed.

CDN Subdomain

Fonts from cdn.yourdomain.com require CORS headers even though it's a subdomain—it's considered cross-origin.

Optimal Cache Headers

Fonts rarely change and benefit from aggressive caching. Use content hashing for cache busting.

Recommended Cache-Control

For Versioned/Hashed Files

inter-400.abc123.woff2

Cache-Control: public, max-age=31536000, immutable

1 year cache, immutable means browsers won't revalidate

For Non-Versioned Files

inter-400.woff2

Cache-Control: public, max-age=604800, stale-while-revalidate=86400

1 week cache with 1 day stale-while-revalidate for updates

Cache Busting Strategy

Include content hash in font filenames (inter-400.a1b2c3.woff2) to enable aggressive caching while allowing instant updates. When fonts change, the new filename bypasses all caches.

Preconnect and Preload

Resource hints help browsers establish connections earlier and prioritize font loading.

<!-- Preconnect to CDN domain -->
<link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>

<!-- Preload critical fonts -->
<link rel="preload"
  href="https://cdn.yourdomain.com/fonts/inter-400.woff2"
  as="font"
  type="font/woff2"
  crossorigin>

<link rel="preload"
  href="https://cdn.yourdomain.com/fonts/inter-700.woff2"
  as="font"
  type="font/woff2"
  crossorigin>

preconnect

Establishes early connections (DNS, TCP, TLS) to the CDN. Use for all fonts served from the CDN.

preload

Starts downloading fonts immediately. Only preload fonts used above the fold (1-2 fonts maximum).

Optimize Fonts for CDN Delivery

Convert your fonts to WOFF2 format for optimal CDN caching and delivery performance.

Start Converting Fonts
Sarah Mitchell

Written & Verified by

Sarah Mitchell

Product Designer, Font Specialist

CDN Font Setup FAQs

Common questions about font delivery optimization