Googleフォントビューア

Googleフォントを検索してプレビューします。ウェブプロジェクトに最適なフォントを見つけて、リアルタイムでどのように表示されるかを確認できます。

フォント検索

目的のフォントを検索またはフィルタリングします。

韓国語フォントのみ表示

カテゴリ

プレビューを開始するにはフォントを選択してください

📚 Googleフォント完全ガイド

Googleフォントを効果的に使用する方法を学びます

🎨🎨 Googleフォントとは？

Googleが提供する無料のWebフォントサービスです。

1,400以上のオープンソースフォントファミリー
商用利用無料のライセンス
高速CDNによるグローバル配信
様々な言語と書記体系のサポート
レスポンシブWebデザインに最適化

⚡⚡ Webフォントの使用方法

1. HTMLでの使用

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. CSSでの適用

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 パフォーマンス最適化のヒント

FOITを防ぐためにfont-display: swapを使用する
DNSルックアップ時間を短縮するためにpreconnectを使用する
必要なフォントウェイトのみを選択的に読み込む
サブセットパラメータで文字セットを制限する
ローカルフォントのフォールバックを設定する

最適化された読み込みの例：

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 レスポンシブタイポグラフィ

様々なデバイスで最適な可読性を確保するための設定：

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}

모바일: 16px 이상 권장
태블릿: 18px 이상 권장
데스크톱: 20px 이상 권장

🎯🎯 フォント選択ガイド

用途別のおすすめフォント：

本文：Noto Sans KR、Spoqa Han Sans:
見出し：Noto Serif KR、Gowun Dodum:
コード：Fira Code、JetBrains Mono:
装飾：Jua、Gamja Flower:

選択基準：

ブランドアイデンティティとの一貫性
可読性とアクセシビリティ
多言語サポート範囲
読み込みパフォーマンス

🔧🔧 高度な使用法

可変フォントの使用：

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

CSSカスタムプロパティの使用：

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ アクセシビリティに関する考慮事項

十分なコントラスト比：WCAG 4.5:1以上
適切な行間：1.4〜1.6を推奨
読みやすいフォントサイズ：最小16px
ディスレクシア対応：OpenDyslexicなどを検討

アクセシブルなCSSの例：

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 デバッグとテスト

フォント読み込みの確認：

DevToolsのネットワークタブでフォントファイルを確認する
計算済みスタイルで実際に適用されたフォントを確認する
font-displayの動作をテストする

パフォーマンス測定ツール：

Google PageSpeed Insights
WebPageTest
Lighthouseのフォント最適化チェック

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;