How to Host Your Custom Font for Free Using Google Cloud Storage

Self-hosting your web fonts improves control, performance, and avoids relying on third-party CDNs. Google Cloud Storage offers a generous Always Free tier that can serve fonts to any website at no cost—as long as you stay within limits.

In this guide, I’ll show you exactly how to:
  • Create a bucket
  • Make it publicly readable (but read-only)
  • Configure CORS so browsers can load your font
  • Reference it in CSS using ``@font-face``

Prerequisites

  • A Google Cloud account (free tier is fine)
  • Your ``.woff`` or ``.woff2`` font files ready
  • Basic familiarity with the Google Cloud Console

Step 1: Create Your Storage Bucket

  1. Open Google Cloud Console:
    https://console.cloud.google.com/storage/browser
  2. Click Create Bucket.
  3. Choose a globally unique name [no users should have named it, like a unique social media user ID] (e.g., vkfonts).
  4. Select a location type (multi-region or region, e.g., us-west1).
  5. Leave the default storage class as Standard.
  6. Under Access control, choose Uniform access control.
  7. Click Create.

Step 2: Upload Your Font Files

  1. Click into your bucket.
  2. Click Upload files.
  3. Select your .woff or .woff2 files.
  4. Wait for the upload to complete.

Step 3: Make the Bucket Public (Read-Only)

By default, your bucket is private. You must grant ``allUsers`` permission to read (view) your files:

  1. In your bucket view, click the Permissions tab.
  2. Click + Grant access (or Add principal).
  3. In New principals, enter:``allUsers``
  4. Under Role, choose:``Storage Object Viewer``
  5. Click Save.

Now your fonts are publicly accessible by URL.

Step 4: Configure CORS for Cross-Origin Requests

Without CORS (Cross-Origin Resource Sharing), browsers will block the font from loading on other domains (like your Blogger or WordPress site).

4.1 Open Google Cloud Shell

In the top bar of Google Cloud Console, click the Terminal icon ("Activate Cloud Shell"). A shell window will open at the bottom.

4.2 Create the CORS JSON

In Cloud Shell, type:

cat <<EOF > cors.json
[
  {
    "origin": ["*"],
    "method": ["GET"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]
EOF

4.3 Apply the CORS Policy

Run:

gsutil cors set cors.json gs://vkfonts

(Replace ``vkfonts`` with your bucket name if different.)

4.4 Verify CORS Is Set

Run:

gsutil cors get gs://vkfonts

You should see your JSON policy printed back.

It can take a few minutes for the CORS policy to propagate across Google's servers.

Step 5: Reference Your Font in CSS

Pick the .woff2 URL for modern browsers and .woff as fallback.

Example URL format:

https://vkfonts.storage.googleapis.com/dexy.woff2

5.1 @font-face Block

In your CSS (or Blogger <style>), add:

@font-face {
  font-family: 'Dexy';
  src: url('https://vkfonts.storage.googleapis.com/dexy.woff2') format('woff2'),
       url('https://vkfonts.storage.googleapis.com/dexy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

5.2 Applying the Font

Use your custom font in CSS:

body {
  font-family: 'Dexy', sans-serif;
}

Step 6: (Optional) Preload the Font for Faster Loading

In your HTML <head>:

<link rel="preload"
      href="https://vkfonts.storage.googleapis.com/dexy.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous">

This tells browsers to start downloading the font early, reducing perceived latency.

Result

✅ Your font is now:

  • Hosted on Google Cloud Storage for free (within the Always Free limits).
  • Publicly accessible.
  • Cross-origin compatible.
  • Ready for modern and older browsers.

Notes & Tips

  • Always use WOFF2 first for better compression.
  • To improve caching, consider setting long-lived cache headers (e.g., ``Cache-Control: public, max-age=31536000``).
  • Test in Chrome DevTools Network tab—verify ``Access-Control-Allow-Origin: *`` and confirm no CORS errors.
  • Re-cache or hard-refresh after CORS changes.