Head to head

Stop guessing which one. Put them side by side.

Up to 4 tools, same rows for each: what it is, what it really costs, the trap, and how to wire it up. The URL carries your picks — send it to anyone.

UtopiaFontshareGoogle Fonts

Field	Utopiautopia.fyi	Fontsharefontshare.com	Google Fontsfonts.google.com
What it is	A set of free calculators for fluid responsive design by James Gilyead and Trys Mudford, backed by Clearleft. You define type and space scales at a minimum and maximum viewport and it emits CSS clamp() values that interpolate between them. Type, space and grid calculators included.	Free font service from the Indian Type Foundry offering a small, tightly curated set of contemporary families — Satoshi, General Sans, Clash Display, Cabinet Grotesk and similar — many with variable versions. Serve from their CDN or download the files and self-host.	Library of open-source typefaces, almost all under the SIL Open Font License 1.1 with a handful under Apache 2.0. Serve them from Google's CDN, self-host the files, or bundle them into a native app. Includes variable fonts and the Material Symbols icon set.
Category	Design tools, color & type	Design tools, color & type	Design tools, color & type
Cost tier	free	free	free
Pricing	Free	Free	Free
Why builders pick it	Replaces a pile of breakpoint overrides with one generated block of custom properties. Paste it once and headings, gaps and padding scale continuously from phone to desktop without another media query.	The quickest way to stop looking like every other Google Fonts site. A handful of these faces read as expensive typography while costing nothing, which is exactly the trade a solo builder wants.	Zero-cost, zero-friction type that is legally safe in commercial products, including ones you sell. Self-hosting a subset via Fontsource or next/font also kills a render-blocking third-party request.
Watch out for	Copy the whole generated custom-property block rather than cherry-picking values — the scale only holds together if every step comes from the same generation.	The ITF licence covers personal and commercial use and embedding in sites and apps, but you may not resell or redistribute the font files themselves. Check the terms per family — some are free cuts of larger paid families.	Serving from Google's CDN sends visitor IP addresses to Google, which a German court ruled a GDPR violation — self-host the files if you have EU traffic. The OFL also bars selling the font files on their own and reserves certain names for modified versions.
How to wire it up	not logged	not logged	npm i @fontsource/inter, or import from next/font/google
Editor's pick	No	No	No

Which one did you ship?

The grid says what these tools are. This says what builders did about it — one decision per person, changeable whenever you change your mind.

0/280Sign in to add yours.

Or try

Hand this to your Lovable agent

# Tool comparison — Utopia vs Fontshare vs Google Fonts

Source: Kbaise, a directory of tools that work with Lovable projects.
Pick one and tell me why before writing any integration code.

## Utopia (utopia)
- URL: https://utopia.fyi
- Category: Design tools, color & type
- Cost: free — Free
- What it is: A set of free calculators for fluid responsive design by James Gilyead and Trys Mudford, backed by Clearleft. You define type and space scales at a minimum and maximum viewport and it emits CSS clamp() values that interpolate between them. Type, space and grid calculators included.
- Why builders pick it: Replaces a pile of breakpoint overrides with one generated block of custom properties. Paste it once and headings, gaps and padding scale continuously from phone to desktop without another media query.
- Trap: Copy the whole generated custom-property block rather than cherry-picking values — the scale only holds together if every step comes from the same generation.
- Full dossier: /api/public/tools/utopia

## Fontshare (fontshare)
- URL: https://www.fontshare.com
- Category: Design tools, color & type
- Cost: free — Free
- What it is: Free font service from the Indian Type Foundry offering a small, tightly curated set of contemporary families — Satoshi, General Sans, Clash Display, Cabinet Grotesk and similar — many with variable versions. Serve from their CDN or download the files and self-host.
- Why builders pick it: The quickest way to stop looking like every other Google Fonts site. A handful of these faces read as expensive typography while costing nothing, which is exactly the trade a solo builder wants.
- Trap: The ITF licence covers personal and commercial use and embedding in sites and apps, but you may not resell or redistribute the font files themselves. Check the terms per family — some are free cuts of larger paid families.
- Full dossier: /api/public/tools/fontshare

## Google Fonts (google-fonts)
- URL: https://fonts.google.com
- Category: Design tools, color & type
- Cost: free — Free
- What it is: Library of open-source typefaces, almost all under the SIL Open Font License 1.1 with a handful under Apache 2.0. Serve them from Google's CDN, self-host the files, or bundle them into a native app. Includes variable fonts and the Material Symbols icon set.
- Why builders pick it: Zero-cost, zero-friction type that is legally safe in commercial products, including ones you sell. Self-hosting a subset via Fontsource or next/font also kills a render-blocking third-party request.
- Trap: Serving from Google's CDN sends visitor IP addresses to Google, which a German court ruled a GDPR violation — self-host the files if you have EU traffic. The OFL also bars selling the font files on their own and reserves certain names for modified versions.
- Wiring: npm i @fontsource/inter, or import from next/font/google
- Full dossier: /api/public/tools/google-fonts

## Rules
1. Prefer the free tier when no budget was stated, and say what the ceiling is.
2. Read the full dossier before integrating.
3. Fetch /api/public/models before writing any AI model ID.

Agents can fetch the same thing: GET /api/public/compare?slugs=utopia,fontshare,google-fonts