Skip to content
The Font World
Pairings Free Fonts Guides Web Type Spotlight About
Web Typography

How to self-host web fonts

Self-hosting web fonts offers greater control over typography, performance, and privacy compared to relying on third-party services like Google Fonts. By s

The Font World Editorial Team
Published 23 August 2026 · 4 min read
The short answer

Self-hosting web fonts offers greater control over typography, performance, and privacy compared to relying on third-party services like Google Fonts. By self-hosting, you can leverage modern font formats like WOFF2, utilize CSS features such as @font-face and preload, and ensure that your users' data isn't being sent to external servers. This guide will walk you through the reasons for self-hosting and the steps to implement it effectively using free, open-licensed

Key points
  • Self-hosting fonts gives you full control over font loading and rendering.
  • Using WOFF2 format ensures better compression and faster load times.
  • @font-face and preload can optimize font loading for performance.
  • Self-hosting avoids privacy concerns associated with third-party font services.
  • Open-licensed fonts like Inter, Merriweather, and Libre Franklin are excellent choices for web projects.

Why self-host web fonts?

Self-hosting web fonts offers several advantages over using third-party font services:

  • Performance: You can optimize font loading by serving fonts from your own server, reducing DNS lookups and potential latency.
  • Privacy: Avoid sending user data to external servers, enhancing user privacy.
  • Control: Full control over font loading, caching, and rendering, allowing for more customized and efficient implementations.
  • Reliability: Reduce dependency on third-party services, ensuring fonts are always available when your site is.

Choosing the right fonts

Selecting the right fonts is key for both aesthetics and performance. Here are some open-licensed fonts that are excellent for web projects:

  • Inter: A versatile sans-serif font designed for computer screens, offering a wide range of weights and excellent legibility.
  • Merriweather: A serif font that performs well in body text, with a high x-height and good contrast, making it readable in various sizes.
  • Libre Franklin: A modern take on the classic Franklin Gothic, offering a clean and professional look with multiple weights.
  • Playfair Display: A high-contrast serif font that shines in headlines and titles, providing elegance and sophistication.
  • Source Sans 3: A humanist sans-serif font that offers a warm and open appearance, suitable for both body text and headings.

Implementing @font-face

The @font-face rule is the cornerstone of self-hosting web fonts. It allows you to define custom fonts and their sources. Here’s how to use it effectively:

  • Font Formats: Use WOFF2 for modern browsers due to its superior compression. Include WOFF and TTF as fallbacks for older browsers.
  • Font Weights and Styles: Define multiple weights (e.g., 400, 600, 700) and styles (e.g., normal, italic) to ensure your typography has the flexibility you need.
  • Example:

    @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2') format('woff2'),
    url('/fonts/Inter-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    }

Optimizing font loading with preload

Preloading fonts can significantly improve the perceived performance of your website by loading critical fonts early. Here’s how to implement it:

  • Link Preload: Add a link tag with rel="preload" and as="font" in the <head> section of your HTML.

    <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
  • Font Display: Use the font-display property to control how fonts are rendered. font-display: swap is a good choice as it ensures text is visible while the font loads.

    @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2') format('woff2'),
    url('/fonts/Inter-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }

Font performance and loading strategies

Optimizing font loading is essential for a fast and smooth user experience. Consider the following strategies:

  • Subset Fonts: Reduce font file sizes by subsetting fonts to include only the characters you need. Tools like Glyphhanger can help automate this process.
  • Font Loading API: Use the Font Loading API to load fonts asynchronously and control their rendering. This can prevent invisible text during font loading.

    const font = new FontFace('Inter', 'url(/fonts/Inter-Regular.woff2)', {});
    font.load().then(function(loadedFont) {
    document.fonts.add(loadedFont);
    document.body.style.fontFamily = '"Inter", sans-serif';
    });
  • Critical FOFT: Implement the Critical FOFT (Flash of Faux Text) technique to render text in a fallback font first, then swap in the web font. This minimizes the impact of font loading on the user experience.

Privacy considerations

Self-hosting fonts enhances user privacy by avoiding the need to connect to third-party servers. Here’s how:

  • No Third-Party Requests: Eliminate the need for external font requests, reducing the risk of user data being sent to external servers.
  • Control Over Data: You have full control over the data that is collected and how it is used, aligning with privacy regulations like GDPR.
  • Enhanced Security: Reduce the risk of malicious code being delivered through third-party fonts, as you have control over the font files hosted on your server.

Frequently asked questions

What is the difference between WOFF and WOFF2?

WOFF2 is an improved version of WOFF, offering better compression and faster load times. WOFF2 is supported by all modern browsers, making it the preferred format for web fonts.

Can I use self-hosted fonts with a CDN?

Yes, you can use a CDN to serve your self-hosted fonts. This can improve load times by leveraging the CDN’s distributed network. However, ensure that the CDN is configured correctly to serve the fonts with the appropriate headers and caching policies.

How do I subset my fonts?

Font subsetting involves removing unused characters from font files to reduce their size. Tools like Glyphhanger can help you subset fonts by analyzing your CSS and generating the necessary subsets. This is particularly useful for large fonts or languages with extensive character sets.

What is the best practice for font loading?

The best practice for font loading is to use the font-display property with a value of swap to ensure text is visible while the font loads. Additionally, preloading critical fonts and using the Font Loading API can further enhance performance and user experience.

Sources & where to get the fonts
  1. MDN: @font-face