How to Replace Google Fonts with coolLabs Fonts on Your Website

To switch, change the hostname in your existing Google Fonts link from fonts.googleapis.com to api.fonts.coollabs.io and leave the rest of the URL untouched. coolLabs Fonts describes itself as a drop-in replacement that supports Google Fonts' css2 and css API endpoints, so the same font families, weights, and query parameters keep working. The same domain swap also applies to the Material Icons endpoint.

Before you start

• You need edit access to the HTML (or template/theme files) where the font <link> is rendered.
• Your site must be able to load stylesheets and font files from api.fonts.coollabs.io; if you use a Content Security Policy, add that host to your style-src and font-src directives.
• No account or key is mentioned on the site, so the swap itself requires no signup step.

Step-by-step swap

1. Find every Google Fonts reference

Search your project for fonts.googleapis.com. Typical results look like a <link> in the document head, or an @import inside a CSS file. Check for both, and check any hard-coded URLs in components or CMS settings.

2. Replace the domain only

Keep the path and query string exactly as they are. For a standard stylesheet link:

<!-- Before -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

<!-- After -->
<link href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

For the older API, the same rule applies:

<link href="https://api.fonts.coollabs.io/css?family=Roboto:400,700&display=swap" rel="stylesheet">

For an @import in CSS, change only the host:

@import url("https://api.fonts.coollabs.io/css2?family=Inter:wght@400;700&display=swap");

3. Handle Material Icons the same way

If you load Material Icons from Google, swap the domain on that link too, per the site's instructions:

<link href="https://api.fonts.coollabs.io/icon?family=Material+Icons" rel="stylesheet">

Keep the endpoint path your current link uses; the site states the same domain swap applies to the icon endpoint.

4. Verify the result

• Load a page and confirm in your browser's Network panel that the stylesheet request goes to api.fonts.coollabs.io and returns CSS, and that the font files themselves load (they are served from BunnyCDN according to the site).
• Check that text renders in the intended typeface rather than a fallback.
• If icons are used, confirm the icon glyphs appear.
• Re-run your search for fonts.googleapis.com to catch leftovers.

What changes and what doesn't

Common snags

• CSP blocks the new host. A strict policy will silently block the stylesheet or font files. Add api.fonts.coollabs.io to the relevant directives.
• Mixed old and new links. A leftover Google Fonts link in a template partial or inline style can keep sending requests to Google. Search the rendered page source, not just your source files.
• Self-hosting vs. this service. If your goal is to serve fonts from your own domain, this swap doesn't do that — it moves requests to a third-party host that states it keeps no logs. Choose based on which requirement matters more to you.
• Availability dependency. You are relying on a sponsor-funded, open-source service; the site says the API is a small open-source HTTP server self-hosted with Coolify on a Hetzner server. If uptime is critical, keep a fallback font stack in your CSS.

The site reports over 7,000,000 monthly requests, which is a signal of adoption rather than a guarantee for your traffic profile. For most sites, the one-line domain change is the entire migration.