1. Home
  2. Lessons
published
31 December 2024
by
Ray Morgan
updated
5 January 2025

Content Delivery Networks (CDNs)

Content Delivery Networks (CDNs) are networks of servers distributed geographically to deliver web content (typically static assets, like fonts, images, scripts, and videos) to users based on their physical location. The goal is to reduce latency and increase availability by serving resources from a server close to the user.

When you use a CDN, resources such as fonts are cached at multiple edge servers worldwide. When a user requests a font, the CDN serves it from the nearest server, speeding up delivery.

Advantages of Using a CDN for Fonts

  1. Faster Load Times:

    • Fonts are served from a server physically closer to the user, reducing latency.

  2. Global Reach:

    • CDNs have a network of servers in multiple countries, ensuring consistent performance for users worldwide.

  3. Load Balancing:

    • Traffic is distributed across multiple servers, reducing the load on your origin server.

  4. Caching and Redundancy:

    • Resources are cached across the CDN’s servers, providing fault tolerance and reducing the risk of downtime.

  5. Built-in Optimization:

    • Many CDNs optimize resources by compressing files, minifying CSS and JavaScript, or delivering modern formats (like WOFF2 for fonts).

  6. Easy Integration:

    • Popular CDNs like Google Fonts allow developers to include fonts with just a few lines of code.

Disadvantages of Using a CDN for Fonts

  1. Caching Control:

    • As you mentioned, purging a CDN’s cache can be challenging. Some CDNs don’t immediately honor purge requests, and changes may take time to propagate.

  2. Dependency on Third Parties:

    • If the CDN experiences downtime or becomes unavailable, your fonts might not load.

  3. Privacy Concerns:

    • CDNs may log user requests for fonts, raising potential privacy issues. This is particularly relevant under regulations like GDPR.

  4. Limited Customization:

    • Hosting fonts on a CDN often limits your ability to subset or modify the fonts for specific use cases.

  5. Cost:

    • While many CDNs offer free tiers, heavy traffic may incur additional costs.

Advantages of Hosting Fonts on Your Own Servers

  1. Full Control:

    • You control when and how fonts are updated, and you don’t rely on third parties for purging caches or resolving issues.

  2. Custom Subsets:

    • You can create and serve subsetted fonts tailored to your specific needs (e.g., for different locales or devices).

  3. Privacy:

    • Fonts hosted on your servers don’t involve third-party tracking or logging.

  4. No Third-Party Downtime:

    • Your font delivery isn’t affected by a CDN outage.

Disadvantages of Hosting Fonts on Your Own Servers

  1. Performance Challenges:

    • Without a CDN, font requests must travel to your origin server, potentially increasing latency for users far from your server.

  2. Scalability:

    • Your server needs to handle all traffic, which could become a bottleneck during peak times.

  3. Management Overhead:

    • You’re responsible for setting up and maintaining caching strategies, subsetting, and delivering the right file formats (e.g., WOFF2, WOFF, TTF).

CDN Cache Purging Problems

Problems with purging a CDN's cache often arise from the following:

  1. Propagation Delays:

    • Changes made to purge the cache may take time to propagate across all edge servers.

  2. Persistent Caches:

    • Some users might still receive cached content if the CDN relies on browser caching headers or doesn’t properly invalidate old resources.

  3. Configuration Issues:

    • Inconsistent cache configurations across CDN servers can cause discrepancies.

  4. Fallback Behavior:

    • If the CDN fails to purge a cached item, users might get the stale version instead of fetching the updated one.

Mitigating CDN Cache Purging Issues

  1. Versioning:

    • Append a version number or hash to font file URLs, such as: 
      src: url('/fonts/my-font.woff2?v=2.0');
    • This forces browsers and CDNs to treat the file as a new resource.

  2. Explicit Cache Headers:

    • Use HTTP headers like Cache-Control and Expires to define caching policies for CDN and browser caches.

  3. Test the Purge:

    • After purging the cache, verify that changes are reflected using tools like browser developer tools or online caching checkers.

  4. Choose a Responsive CDN:

    • Some CDNs, like Cloudflare and Fastly, are known for quicker and more reliable cache purging.
← Back Next →
✕