mcpField
G
google-fonts

google-fonts

github.com/slidayデザイン・UI17249 回インストール8 週間前に更新
リポジトリ

google-fonts について

google-fontsは、ウェブプロジェクト向けのタイポグラフィシステム生成ツールです。検索できるGoogle Fontsのメタデータ、ペアリング情報、モジュラーな文字サイズスケールを備え、CSSやTailwind設定、埋め込みリンクを作成できます。

主な機能

  1. 01フォントのメタデータ検索と絞り込み
  2. 02推奨フォントペアの検索
  3. 03フォント詳細とスケールの参照
  4. 04CSSとTailwind設定の生成
  5. 05100種類のシステム例を閲覧

活用シーン

  1. 01ウェブ製品のフォント選定
  2. 02見出しと本文のフォント組み合わせ
  3. 03レスポンシブな文字サイズ設計
  4. 04プロジェクト別のシステム例確認

MCP 対応

google-fonts MCPサーバーに接続している場合、search_fonts、generate_typography_system、lookup_font、list_scales、list_pairingsの各ツールを優先して使うことが推奨されています。スキルのみの環境ではスクリプトが代替手段です。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sliday/google-fonts-skill --skill google-fonts

インストール後、Claude Code で/google-fontsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE
CLAUDE.md
CHANGELOG.md
.gitignore
README.md
pyproject.toml
community-announcement.md
.claude-plugin/
marketplace.json
plugin.json
.github/
dependabot.yml
.github/workflows/
pages.yml
publish.yml
data/
scales.csv
pairings.csv
references/
pairing-principles.md
typographic-rhythm.md
registry/
awesome-mcp-servers.md
mcp-hub.json
smithery.yaml
scripts/
build-pairings.py
core.py
generate-llms-full.py
generate-css.py
fetch-and-enrich.py
generate-og-images.py
search.py
generate-showcase.py
showcase/
.nojekyll
showcase/pages/
anthem-brands.html
aether-analytics.html

詳細

Auto Google Font

Google Fonts を使用した、Web プロジェクト向けタイポグラフィシステムジェネレーターです。タイポグラフィの特徴を示すタグ（ジオメトリック、ヒューマニスト、ネオ・グロテスクなど）、コントラストレベル、本文への適性評価が付与された1,923種類のフォントを検索します。タイポグラフィのリズムを整えたシステムを一式生成します。

データファイル

  • data/fonts.csv — 1,923種類の Google Fonts。次の情報を含みます：Family、Category、Stroke、Personality、Expressive、Contrast、Width、Styles、Weight_Range、Variable、Variable_Axes、Body_Suitable、Quality_Tier（A/B/C）、Popularity_Rank、Mood、Best_For、Keywords、Subsets、Google_Fonts_URL、CSS_Import
  • data/pairings.csv — コントラストの種類とスケールの推奨情報を含む、実績のある73組のフォントペア
  • data/scales.csv — サイズ、行の高さ、文字間隔、余白を含む8種類のモジュラータイプスケール
  • references/typographic-rhythm.md — スケールの計算方法、行の高さの段階、スペーシングのルール
  • references/pairing-principles.md — コントラスト理論、判断ツリー、スーパーファミリー

モード

MCP に関する注意： google-fonts MCP サーバーが接続されている場合は、以下のスクリプトよりもそのツール（search_fonts、generate_typography_system、lookup_font、list_scales、list_pairings）を優先してください。スクリプトは、スキルのみをインストールした場合のフォールバックです。

単一フォント（厳密）

見出しと本文の両方に1つのフォントを使用します。ウェイトの範囲に400と700を含める必要があります。本文への適性も必須です。

python3 scripts/search.py "modern clean SaaS" --mode single
python3 scripts/search.py "geometric professional" --mode single --tier A
フォントペア（コントラスト）

タイポグラフィにコントラストを持たせる2つのフォントを使用します。まず、実績のあるペアを検索します。

python3 scripts/search.py "elegant editorial luxury" --mode pair
python3 scripts/search.py "tech startup bold" --mode pair
検索とスケール
python3 scripts/search.py "Inter" --mode lookup        # full metadata for a named font
python3 scripts/search.py "marketing bold" --mode scale  # search type scales
システム全体の出力

フォントの選択とスケールの指定から、CSS、Tailwind、埋め込みリンクを生成します。

# Single font
python3 scripts/generate-css.py --font "Inter" --scale major-third --format all

# Font pair
python3 scripts/generate-css.py --heading "Playfair Display" --body "Inter" \
  --scale perfect-fourth --format all

# Custom weights and base size
python3 scripts/generate-css.py --heading "Space Grotesk" --body "DM Sans" \
  --heading-weights "400;700" --body-weights "300;400;500;700" \
  --scale minor-third --base 16 --format css

ワークフロー

  1. コンテキストを把握する — 製品の種類、雰囲気、コンテンツの密度、既存のブランドについて質問します
  2. フォントを検索する — 関連するキーワードとモードを指定して search.py を実行します
  3. 上位3件を提示する — Family、Personality、Contrast、Quality Tier、Weight Range を表示します
  4. システムを生成する — 選択したフォントと適切なスケールを指定して generate-css.py を実行します
  5. 納品する — CSS カスタムプロパティ、Tailwind の設定、埋め込みリンクを提供します

クイック判断ガイド

プロジェクトの種類モードスケール推奨する検索語
SaaS／ダッシュボード単一major-second"すっきりした プロフェッショナルな ジオメトリック"
ブログ／コンテンツペアmajor-third"エディトリアル 読みやすい"
マーケティング／ランディングページペアperfect-fourth"大胆な モダンな 自信に満ちた"
高級／ファッションペアaugmented-fourth"エレガントな プレミアムな セリフ体"
ドキュメント単一minor-third"読みやすい アクセシブルな ヒューマニスト"
Eコマースペアminor-third"すっきりした 親しみやすい コンバージョン"
ポートフォリオペアperfect-fourth"クリエイティブな 個性的な"
エンタープライズ／行政単一major-second"信頼できる アクセシブルな コーポレート"

スケールの参照

スケール比率推奨用途
minor-second1.067高密度のUI、ダッシュボード
major-second1.125アプリ、管理パネル
minor-third1.2汎用
major-third1.25ブログ、コンテンツ
perfect-fourth1.333マーケティング、エディトリアル
augmented-fourth1.414雑誌、表現力を重視するデザイン
perfect-fifth1.5ディスプレイ表示が中心のデザイン
golden-ratio1.618ヒーローセクション

ペアリングのコントラストの種類

  • 構造：セリフ体＋サンセリフ体（最も安全で、コントラストも最大）
  • プロポーション：ジオメトリックサンセリフ体＋ヒューマニストサンセリフ体（控えめでモダン）
  • 時代：オールドスタイルのセリフ体＋ネオ・グロテスクのサンセリフ体（ドラマチック）
  • ウェイト：同一のフォントファミリーで異なるウェイトを使用（最もシンプル）

品質ルール

  1. Google Fonts の埋め込みでは、常に display=swap を使用してください
  2. 可変フォントを優先してください（HTTP リクエスト数が少なく、ウェイトを柔軟に設定できます）
  3. 本文用フォントに、単一ウェイトのフォントを提案しないでください
  4. 提案する前に、Weight_Range が必要なウェイトをカバーしていることを確認してください
  5. 本文用には、Body_Suitable=="Yes" のフォントのみを提案してください
  6. まず Tier A のフォントを提示し、次に B、最後に C を提示してください
  7. fonts.googleapis.com と fonts.gstatic.com の preconnect ヒントを含めてください
  8. 1 プロジェクトあたりのフォントファミリーは最大 3 つです（見出し＋本文＋任意の等幅フォント）
  9. css2 URL では、ウェイトをセミコロン（wght@400;700）、範囲を ..（[email protected]）で区切ります； カンマは正規化されますが、不正な軸やハイフンで指定した範囲は拒否されます

出力内容

  • CSS カスタムプロパティ：フォントファミリー、サイズ、行の高さ、文字間隔、行長
  • Tailwind 設定：fontFamily、lineHeight と letterSpacing を含む fontSize
  • preconnect を含む Google Fonts の <link> 埋め込み
  • レスポンシブブレークポイントのガイダンス

ショーケースギャラリー

架空のプロジェクトに適用した、あらかじめ作成済みのタイポグラフィシステムが 100 種類あります。showcase/index.html を参照するか、 プログラムから利用する場合は showcase/showcase.json を参照してください。

ユーザーが「例を見せて」「自分に合うスタイルを選んで」「SaaS アプリには何が合う？」と言った場合は、 showcase/showcase.json を読み込み、プロジェクトの種類で絞り込んで、あらかじめ作成されたシステムを提案してください。

再生成
python3 scripts/generate-showcase.py

タイポグラフィ理論の詳細については、references/typographic-rhythm.md をお読みください。 組み合わせを選ぶための決定木については、references/pairing-principles.md をお読みください。

コメント

Markdown 対応