fonts.coollabs.io

coolLabs Fonts is a privacy-friendly drop-in replacement for Google Fonts. It serves the same fonts through a different domain and, according to the project, does not log anything about your visitors. You use it by changing fonts.googleapis.com to api.fonts.coollabs.io in your font tags. This suits sites that already use Google Fonts and want to keep the same fonts and API while moving font requests away from Google's servers.

What problem it solves

Google Fonts requests go to Google's servers, which means your visitors' details reach Google. coolLabs Fonts keeps the same font service but routes requests elsewhere. The project states that the API does not log IP addresses, browser agents, or request details, and that font files are served from BunnyCDN with logging disabled on their side.

The practical effect: font requests no longer go to Google, so visitor details stay away from Google's servers. The project describes this as GDPR friendly.

How to switch

The change is a single domain swap in your existing font tags.

Before:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

After:

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

Steps:

1. Find every fonts.googleapis.com reference in your HTML or CSS (font <link> tags and @import rules).
2. Replace the domain with api.fonts.coollabs.io, keeping the rest of the URL unchanged.
3. Load the page and confirm the fonts render as before.

Expected result: the same fonts appear, but requests go to coolLabs Fonts instead of Google.

What it supports

Because it mirrors Google Fonts' API endpoints, existing font URLs generally work after the domain change. If a font or icon set is available through Google Fonts' CSS API, the same URL path should work on the coolLabs domain.

Who it is for

• Sites already using Google Fonts that want to stop sending font requests to Google.
• Projects with privacy or GDPR concerns about third-party requests to Google.
• Developers who want a minimal change rather than reworking their font setup.

It is less relevant if you already self-host fonts or use a different font delivery method, since the main benefit is the one-line domain swap.

Things to know

• It is a third-party service. You are still depending on an external domain for font delivery, just not Google's. Check that this fits your privacy requirements.
• Availability depends on the project. The service is described as open source, self-hosted on a Hetzner server, and funded by sponsors. There is no stated uptime guarantee in the provided material, so consider a fallback font stack in your CSS.
• Verify after switching. Load a page with the new domain and confirm fonts and icons render. If a font fails to load, check that the URL path matches the original Google Fonts URL exactly.
• Pricing and access terms are not specified in the available material beyond the project describing itself as free and open source; confirm current terms on the site if you need certainty.

The project reports over 7,000,000 monthly requests, which suggests real-world use, but treat that as the project's own figure rather than an independent measurement.

An open-source UI element library is a collection of individual, ready-made interface pieces—buttons, cards, inputs, toggles, loaders—that you copy into your own project and adapt. A UI framework, by contrast, is a structured system of components, conventions, and often a theming layer that governs how your whole interface is built. The practical difference: an element library gives you a snippet; a framework gives you a way of working. If you need a polished button in ten minutes, reach for the element library. If you're building a 40-screen product with a team, you probably want the framework.

What "open-source UI element library" actually means

The term gets used loosely, so it helps to separate the parts:

• Open-source: the code is publicly available, and the license tells you what you may do with it—copy, modify, redistribute, or use commercially.
• UI element: a single, self-contained piece of interface, usually small enough to read in one sitting. A button with hover states, a pricing card, a search field.
• Library: a browsable, searchable collection of those elements, typically contributed by many different people.

On a site like Uiverse, elements are shared by a community and written in plain CSS or Tailwind. You find one you like, copy the markup and styles, paste them into your project, and adjust colors, spacing, and text to fit. There's no package to install and no build step required—which is exactly the appeal, and also the source of most of the confusion.

Element library vs. UI framework: the core differences

The table isn't a verdict. It's a map of trade-offs. Element libraries win on speed and freedom; frameworks win on consistency and maintenance.

Licensing and attribution: what to check before you paste

This is where people get into trouble, and it's worth slowing down for.

1. Find the license. Every element or collection should state one. Common open-source licenses include MIT, Apache-2.0, and BSD. Some projects use copyleft licenses like GPL, which can impose obligations if you redistribute your code.
2. Understand what the license permits. MIT and Apache-2.0 are permissive: you can typically use the code in commercial and closed-source projects. Copyleft licenses may require you to release derivative source under the same terms.
3. Check attribution requirements. Permissive licenses usually require you to keep the copyright notice and license text somewhere in your project. That's a real obligation, not a formality.
4. Look for per-element terms. On community sites, the site's overall terms and the individual contributor's stated wishes may differ. If a contributor asks for credit, honor it.
5. When in doubt, ask or avoid. If a snippet has no license at all, you don't have clear permission to reuse it. Treat "no license" as "not open source," even if the code is publicly visible.

This article is general information, not legal advice. For commercial products with real exposure, have someone qualified review the licenses you're relying on.

How to use a community element in your project: a practical workflow

Here's a repeatable process that avoids most of the usual mess.

1. Start from a real need, not a browsing session

Decide what you need first—"a compact primary button with a loading state"—then search. Browsing aimlessly produces a pile of pretty snippets that don't fit together.

2. Copy the smallest version that works

Take the markup and the styles. Strip anything you don't need: demo wrappers, extra animations, decorative layers. Less code means fewer surprises.

3. Convert it to your conventions

If your project uses design tokens or CSS variables, replace hard-coded values:

/* Before: hard-coded */
.button { background: #4f46e5; border-radius: 8px; }

/* After: token-based */
.button { background: var(--color-primary); border-radius: var(--radius-md); }

This one step is what keeps a copied element from looking like a foreign object in your UI.

4. Check accessibility before you ship

Community elements vary widely here. Verify at minimum:

• Keyboard focus is visible and the element is reachable by Tab.
• Color contrast meets WCAG AA (4.5:1 for normal text).
• Interactive elements use semantic HTML (<button>, not a clickable <div>).
• Form inputs have associated labels.
• Motion respects prefers-reduced-motion.

5. Test in context

Paste it into a real page with real content. Long labels, small screens, and dark mode break more copied elements than anything else.

6. Note where it came from

Keep a short comment or an internal credits file: source, license, date. Future you—and your legal reviewer—will be grateful.

Where element libraries genuinely shine

• Prototypes and demos: you need something clickable today, not a design system.
• Landing pages and marketing sites: a handful of distinctive elements, each custom.
• Filling gaps: your framework lacks one specific component, and you don't want to build it from scratch.
• Learning: reading well-made CSS is one of the fastest ways to improve.
• Small projects: a personal site doesn't need a theming architecture.

Where they fall short

• Consistency at scale: ten elements from ten contributors rarely look like one product.
• Maintenance: you own every copy. When your design changes, you edit each one.
• Accessibility debt: you inherit whatever the contributor did or didn't do.
• No upstream fixes: a bug fixed in the original won't reach your copy.
• Integration friction: different naming conventions, different units, different assumptions about resets.

When to choose which

Choose an element library when the scope is small, the timeline is short, or you need a few distinctive pieces rather than a whole system.

Choose a framework or design system when multiple people build multiple screens over months, when consistency is a product requirement, or when accessibility and theming need to be guaranteed rather than checked.

A hybrid works well for many teams: adopt a framework for the structural components—forms, navigation, layout—and borrow individual elements for the places where you want personality. Just route every borrowed element through the same token and accessibility checks, so it lands as part of your system rather than beside it.

The short version: open-source UI element libraries are a fast, flexible way to get good-looking interface pieces into a project. They are not a substitute for a design system, and the license and accessibility details are the part worth reading carefully.

Yes. coolLabs Fonts is built as a drop-in replacement for Google Fonts: it supports the css2 and css API endpoints, and Material Icons are available through the same domain swap. In practice, you keep your existing font URLs and change only the hostname from fonts.googleapis.com to api.fonts.coollabs.io.

What "drop-in replacement" means here

The service describes itself as "Google Fonts, without Google" — same fonts, same API, but without logging anything about your visitors. Because the request format stays the same, existing <link> tags and @import rules continue to work after the domain change.

How to switch: step by step

1. Find your font references. Search your templates, CSS, or build config for fonts.googleapis.com. This covers both <link href="..."> tags and @import url(...) statements.
2. Replace the hostname only. Change fonts.googleapis.com to api.fonts.coollabs.io. Leave the rest of the URL — family names, :wght@ ranges, display=swap, and so on — untouched.
3. Check icon usage separately. If you load Material Icons, apply the same domain swap to the icon endpoint URL.
4. Verify in the browser. Reload the page, open DevTools → Network, and confirm font files are requested from the coolLabs domain and render correctly. Check the computed font-family on a few elements to make sure the intended family is applied.

Example: a typical 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">

The css2 path and all parameters are preserved; only the domain changed.

Compatibility details worth knowing

• Both API generations are supported. Sites still using the older css endpoint don't need to migrate to css2 first.
• Material Icons work the same way. The icon endpoint is reachable through the swapped domain, so icon fonts don't need a separate provider.
• Font files are served from BunnyCDN, with logging disabled on the CDN side according to the project. This matters if your reason for switching is privacy rather than performance.
• The service is open source and runs as a small HTTP server, so you can inspect or self-host it if you need full control.

Common snags when swapping

• Hard-coded URLs in multiple places. Font links often live in a theme file, a CMS setting, and a CSS file at once. Grep the whole project rather than editing the first match.
• Cached CSS. If fonts still load from Google after the change, clear your site cache or CDN cache and hard-reload the browser.
• Content Security Policy. If your CSP allowlists fonts.googleapis.com, add api.fonts.coollabs.io to style-src and font-src, or the swap will be blocked silently.
• Preconnect hints. Update any <link rel="preconnect" href="https://fonts.googleapis.com"> and fonts.gstatic.com hints to point at the new domain, otherwise you keep connections to Google for no benefit.

Is the swap worth it for you?

Choose coolLabs Fonts if you want to keep your current Google Fonts markup and typography while removing Google from the font request path — for example, when a privacy review flags third-party font requests. The one-line domain change keeps migration effort low and is reversible.

Stay with Google Fonts directly if you depend on features beyond the css/css2 endpoints and Material Icons, or if your organization requires a formally contracted provider. The project is funded by sponsors and described as free, but the available material doesn't document service-level guarantees, so treat availability as a consideration for production sites.

Yes. coolLabs Fonts is free to use and open source. The project states it is "open source and free forever," with no ads and no investors; it is funded by sponsors. The API is described as a small open-source HTTP server, self-hosted with Coolify on a Hetzner server.

What "free" means here

The site presents free access as a sponsorship-supported model rather than a paid tier:

• No ads and no investors — funding comes from sponsors.
• Free forever — the project's stated commitment, with an invitation to sponsor it if it helps you.
• No pricing page or payment flow is mentioned in the available site material, so there is no documented paid plan to compare against.

The site does not describe usage caps, account requirements, or a commercial license. If you need contractual guarantees for a business deployment, treat those as open questions to confirm with the project rather than assumptions.

What "open source" covers

The open-source claim applies to the API server itself, not necessarily to the font files it serves:

Because the fonts are the same ones Google Fonts distributes, check the license of each typeface you use if licensing matters for your project.

How the free service stays privacy-friendly

The funding model connects to the privacy pitch: no ads or investors means no monetization of visitor data. The site says the API logs nothing — no IP addresses, browser agents, or request details — and that font requests never reach Google's servers, which keeps visitor details away from Google. Font files come from BunnyCDN with logging fully disabled on their side.

Practical takeaway

If you want a drop-in replacement for Google Fonts without a paid dependency, coolLabs Fonts fits: swap fonts.googleapis.com for api.fonts.coollabs.io in your font tags, and the same css2 and css API endpoints plus Material Icons are supported. If you need a formal support contract or explicit font licensing documentation, verify those directly with the project before relying on it in production.

coolLabs Fonts is designed as a privacy-friendly, drop-in replacement for Google Fonts: it serves the same fonts through the same CSS API, but the API does not log IP addresses, browser agents, or request details, and font files are delivered via BunnyCDN with logging disabled on their side. That makes it a reasonable option for GDPR-conscious sites that want to stop sending visitor data to Google's servers — though it is a technical privacy measure, not a legal guarantee, and you should still confirm it fits your own compliance obligations.

What coolLabs Fonts actually changes

The core mechanism is a domain swap. Instead of requesting stylesheets from fonts.googleapis.com, your pages request them from api.fonts.coollabs.io. The service states it supports the css2 and css API endpoints of Google Fonts, so existing font declarations keep working after the change. Material Icons are supported too, using the same domain swap for the icon endpoint.

Because the font requests no longer go to Google, visitors' details stay away from Google's servers. The project positions this as a GDPR-friendly setup: font loading is a routine part of nearly every page view, so routing it through a third party that logs requests is exactly the kind of data flow privacy-conscious sites try to avoid.

What data is and isn't logged

The project also describes itself as open source: the API is a small open-source HTTP server, self-hosted with Coolify on a Hetzner server. That matters for verification — you can inspect the server code rather than taking the logging claims on faith.

How to switch your site over

1. Find your font links. Look in your HTML <head> for <link> tags pointing at fonts.googleapis.com, including any css2 stylesheet URLs and Material Icons links.
2. Change the domain. Replace fonts.googleapis.com with api.fonts.coollabs.io in each of those tags. The project's instruction is literally: "In your tags, change fonts.googleapis.com to api.fonts.coollabs.io. That's all!"
3. Verify the result. Load a page and check in your browser's network panel that font CSS and font files now come from api.fonts.coollabs.io (and the CDN), with no remaining requests to fonts.googleapis.com. Confirm the fonts render as before.
4. Check icons separately. If you use Material Icons, apply the same domain swap to the icon endpoint and confirm the icons still display.

Common snags: font URLs hard-coded in a CMS theme, a plugin, or a CSS @import rather than a <link> tag will be missed by a simple search-and-replace; and any locally cached or preloaded references need updating too.

Limits worth knowing before you decide

• It's a privacy measure, not a compliance certificate. The no-logging design and the removal of Google from the request path reduce the data flow, but whether your site meets GDPR depends on your full setup — consent handling, other third parties, and your own records. Treat the service's claims as inputs to that assessment, not a substitute for it.
• You're trusting a smaller operator. coolLabs Fonts is run by a small open-source project funded by sponsors ("Free, because of our sponsors"), not a large provider. The open-source server code and the stated CDN logging configuration are the things to check if that trust matters to you.
• Self-hosting is the stronger option. If you want the most control, hosting font files yourself removes the third-party request entirely; coolLabs Fonts is the lower-effort middle ground when you want Google Fonts compatibility without Google.

If your goal is simply to stop font requests from reaching Google while keeping the same fonts and API, the one-domain swap is a quick, low-risk change. If your goal is a documented GDPR position, use it as one component and verify the logging behavior against the project's source and CDN configuration.