Font Pairing Tool

ปัญหาที่แก้

เวลาเริ่มโปรเจคใหม่ มักเสียเวลาไปกับการสลับไปมาระหว่าง Google Fonts, CodePen และ editor เพื่อทดลอง font pairing — Font Pairing Tool รวมทุกอย่างไว้ในหน้าเดียว ทดลองได้ทันที

ฟีเจอร์

• เลือก heading font + body font แยกกันจาก Google Fonts (40+ fonts ที่คัดมา)
• ปรับ font size, line height, letter spacing แบบ real-time
• ดูตัวอย่างข้อความจริง: heading, subheading, paragraph, list
• Copy ค่า CSS พร้อมใช้ได้ทันที
• Share URL พร้อม font ที่เลือกไว้ (encode ใน URL params)
• Dark mode

Tech Stack

• Vanilla TypeScript — ไม่มี framework ให้ bundle เล็กที่สุด
• Google Fonts API — โหลด font dynamically ตามที่เลือก
• URL Search Params — store state ใน URL เพื่อ share ได้
• CSS Custom Properties — เปลี่ยน font family ทั้งหน้าด้วย --font-heading / --font-body

Implementation Highlight

// โหลด font จาก Google Fonts แบบ dynamic
function loadGoogleFont(family: string): void {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@400;700&display=swap`;
  document.head.appendChild(link);
}

// apply font ทั้งหน้าด้วย CSS variable
function applyFont(type: 'heading' | 'body', family: string): void {
  document.documentElement.style.setProperty(`--font-${type}`, `'${family}', sans-serif`);
  loadGoogleFont(family);
}

// encode state ใน URL
function updateURL(heading: string, body: string): void {
  const params = new URLSearchParams({ h: heading, b: body });
  history.replaceState(null, '', `?${params}`);
}

// restore จาก URL เมื่อโหลดหน้า
const params = new URLSearchParams(window.location.search);
const headingFont = params.get('h') ?? 'Inter';
const bodyFont = params.get('b') ?? 'Noto Sans Thai';

Font Pairs ที่ชอบ

สิ่งที่เรียนรู้

URL เป็น state ที่ดีสำหรับ shareable tools — ไม่ต้องมี backend ไม่ต้องมี account ผู้ใช้ share URL แล้วคนอื่นเห็นผลเดิม

CSS Custom Properties ทำ real-time preview ได้ง่ายมาก — เปลี่ยน --font-heading บน :root ครั้งเดียว ทุก element ที่ใช้ variable นี้ update ทันที

Google Fonts API มี latency — โหลด font ครั้งแรกจะเห็น FOUT (flash of unstyled text) ชั่วคราว แก้ได้ด้วย font-display: swap ใน font URL