Developer Guide

How FontSelf Works

Self-host any Google Font in under 60 seconds. GDPR compliant, Core Web Vitals optimized.

Why Self-Host?

Why teams move fonts off the Google CDN

Loading fonts from Google's CDN sends the visitor's IP address to Google's servers. German courts have ruled that behavior a GDPR violation for EU-based sites, so self-hosting is the practical fix.

External font requests add a DNS lookup and connection setup cost that usually lands somewhere between 50 and 200 milliseconds on first load. Hosting the files yourself removes that round-trip and lets you add preload hints that directly improve LCP.

Self-hosted fonts also give you operational control. A third-party CDN outage or a quiet font revision cannot change your typography because you ship the exact files your site depends on.

Walkthrough

Step-by-step from search to ready-to-ship assets

  1. 1

    Search and select a font from the catalog

    Browse the catalog of 1,400+ families, then pick the one you want to self-host.

  2. 2

    Configure weights, subsets, and axis ranges

    Variable fonts expose axis ranges, while static families let you choose the exact weights and styles you need.

  3. 3

    Choose a font-display strategy

    Use swap by default unless you have a very specific rendering goal. It is the right choice for most production sites.

  4. 4

    Download the ZIP package

    The archive includes the WOFF2 file or files and a ready-to-paste fonts.css file that already contains the full @font-face block.

ZIP Contents

What ships in the download

The ZIP contains the binary WOFF2 font file or files, named with the family and weight so they are easy to identify during integration.

It also includes a fonts.css file with the full @font-face block already written. The generated CSS uses relative paths, so it keeps working no matter where you place the files in your project.

Implementation

Implementation checklist

3

Implementation Guide

  1. 1

    Upload the font files to the /public/fonts directory

    Ensure the saved filenames match the paths referenced in your generated @font-face rules.

  2. 2

    Paste the generated CSS into your global stylesheet

    Add the snippet near the top of your main stylesheet so the font family is available application-wide.

  3. 3

    Add a preload link tag to the document <head>

    Preloading the critical WOFF2 file helps above-the-fold text render with the intended font sooner.

  4. 4

    Set long-term Cache-Control headers for .woff2 files

    Use immutable caching so repeat visits can serve the font from cache without another network transfer.

Variable Fonts

One file, many weights and styles

Variable fonts are single files that support a continuous range of weights and styles, exposed through axes like wght, ital, and opsz. One file can replace what would otherwise require six or more separate weight files. FontSelf detects variable fonts automatically and shows the available axis ranges instead of individual weight checkboxes.

font-display

Choose the loading behavior that matches your priorities

swap

Show fallback immediately, then swap when the font loads. Best for most sites.

optional

Use the font only if it is already cached. Best for squeezing Core Web Vitals scores.

block

Hide text briefly while the font loads. Avoid this unless the brand requirement is strict.

fallback

Allow a short block period, then show fallback text. This is the middle ground.

GDPR Note

The legal fix is the hosting change itself

After self-hosting, your site will no longer send visitor IP addresses to Google's servers. This is the fix for the GDPR violation identified in Munich Regional Court ruling Az. 3 O 17493/20. No additional legal changes are required — self-hosting is sufficient.