← Back to list
frontend-google-fonts
by petbrains
Document-Driven Development framework for Claude Code — structured specs, TDD cycles, feedback loops, and skills system
⭐ 6🍴 1📅 Jan 24, 2026
Run in ManusSKILL.md
name: frontend-google-fonts description: Typography setup with Google Fonts for Next.js + Tailwind projects. Use when choosing fonts, need font pairing recommendations (SaaS, editorial, corporate presets), or setting up optimized font loading. Includes ready-to-use configurations and performance best practices. allowed-tools: Read, Edit, Write, Bash (*)
Google Fonts
Typography setup for web projects. Font pairings + performance optimization.
When to Use
- Setting up project fonts
- Need font pairing recommendations
- Optimizing font loading
Process
SELECT → CONFIGURE → APPLY
- Choose fonts for project type
- Configure in Next.js
- Add to Tailwind
Quick Start (Next.js)
// lib/fonts.ts
import { Inter, Plus_Jakarta_Sans } from 'next/font/google'
export const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
export const jakarta = Plus_Jakarta_Sans({
subsets: ['latin'],
display: 'swap',
variable: '--font-jakarta',
})
// app/layout.tsx
<html className={`${inter.variable} ${jakarta.variable}`}>
// tailwind.config.ts
fontFamily: {
sans: ['var(--font-inter)'],
display: ['var(--font-jakarta)'],
}
Font Pairing Presets
Modern SaaS:
Heading: Plus Jakarta Sans
Body: Inter
Corporate:
Heading: Source Sans 3
Body: Source Serif 4
Editorial:
Heading: Playfair Display
Body: Lora
Tech/Dev:
Heading: Geist
Body: Inter
Code: Geist Mono
Startup/Friendly:
Heading: Outfit
Body: Nunito
Top Font Choices
| Font | Category | Best For |
|---|---|---|
| Inter | Sans | Universal default |
| Plus Jakarta Sans | Sans | Modern SaaS |
| DM Sans | Sans | Clean startups |
| Geist | Sans | Dev tools |
| Playfair Display | Serif | Elegant headlines |
| Lora | Serif | Long-form reading |
| JetBrains Mono | Mono | Code blocks |
Performance Tips
Variable fonts: Use Inter, not Roboto with weight array
Subset: Only 'latin' unless multilingual
Display swap: Always set display: 'swap'
Self-host: next/font auto self-hosts (no external requests)
Typography Scale
text-xs: 12px
text-sm: 14px
text-base: 16px
text-lg: 18px
text-xl: 20px
text-2xl: 24px
text-3xl: 30px
text-4xl: 36px
Decision by Project Type
| Type | Heading | Body |
|---|---|---|
| SaaS Dashboard | Inter | Inter |
| Marketing Site | Plus Jakarta | Inter |
| Blog | Playfair Display | Lora |
| Dev Docs | Geist | Inter |
| Enterprise | Source Sans | Source Serif |
Resources:
Score
Total Score
75/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
✓説明文
100文字以上の説明がある
+10
○人気
GitHub Stars 100以上
0/15
✓最近の活動
1ヶ月以内に更新
+10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
✓タグ
1つ以上のタグが設定されている
+5
Reviews
💬
Reviews coming soon
