ai-agent

google-type: Better Typography

Name: google-type: Better Typography
Author: femmebot

Founders get a collaborative typography project with google-type, featuring Google Fonts. For startups needing responsive typography.

1,022 stars90 forksCSSGuide quality 8/10Updated 6/2/2026100% free · open source

What it does

Google-type is a collaborative typography project that helps startup founders create responsive typography using Google Fonts for their web applications

When to use it

•When you need to ensure consistent typography across different devices and screen sizes
•When you want to use open-source Google Fonts in your web application
•When you need to collaborate with team members on typography choices

Ready-to-paste prompt

To use the Open Sans font, add the following line to your CSS file: `@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');`, then update your `font-family` property to `font-family: 'Open Sans', sans-serif;`

Heads up: Make sure you have a stable internet connection to use Google Fonts, as they are loaded from the Google Fonts API, and also be aware that some Google Fonts may have limited usage or require attribution

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/google-type && curl -fsSL https://workflowstacks.com/api/skills/google-type/claude-skill -o ~/.claude/skills/google-type/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How google-type: Better Typography works

Codeflow

Free to inspect

Google-type: Better Typography is a small CSS project (~2.4k lines across 2 code files). Setup is light: small project — see the README for how to run it. Last commit 3 months ago, MIT license, no tests found.

Size

Small codebase

~2.4k lines · 2 code files · 20 min skim

Setup

Light setup

Small project — see the README for how to run it.

Runs on

CSS

No API keys detected

CSS 52%HTML 47%

Where to start reading

1
README.md
Start here — what it does and how to install it

What's in each folder

images/pomegranate/Folder6 files

images/the-bee-and-jupiter/Folder4 files

images/the-fox-and-the-grapes/Folder4 files

images/butcher/Folder3 files

images/the-boy-bathing/Folder2 files

images/venus/Folder2 files

scripts/Helper scripts2 files

images/hercules/Folder1 files

READMENo tests foundDocumentedNo CIMIT licenseUpdated 3 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/google-type && curl -fsSL https://workflowstacks.com/api/skills/google-type/claude-skill -o ~/.claude/skills/google-type/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

femmebot

Language

CSS