โปรแกรมดู Google Fonts

ค้นหาและดูตัวอย่าง Google Fonts ค้นหาฟอนต์ที่สมบูรณ์แบบสำหรับโปรเจกต์เว็บของคุณและดูว่าฟอนต์เหล่านั้นมีลักษณะอย่างไรในเวลาจริง

ค้นหาฟอนต์

ค้นหาหรือกรองฟอนต์ที่คุณต้องการ

แสดงเฉพาะฟอนต์เกาหลี

หมวดหมู่

เลือกฟอนต์เพื่อเริ่มดูตัวอย่าง

📚 คู่มือ Google Fonts ฉบับสมบูรณ์

เรียนรู้วิธีใช้ Google Fonts อย่างมีประสิทธิภาพ

🎨🎨 Google Fonts คืออะไร?

Google Fonts เป็นบริการเว็บฟอนต์ฟรีที่ Google ให้บริการ

ฟอนต์โอเพนซอร์สมากกว่า 1,400 แบบ
ใบอนุญาตฟรีสำหรับการใช้งานเชิงพาณิชย์
การกระจายทั่วโลกผ่าน CDN ที่รวดเร็ว
รองรับภาษาและระบบการเขียนที่หลากหลาย
ปรับให้เหมาะสมสำหรับการออกแบบเว็บที่ตอบสนอง

⚡⚡ วิธีใช้เว็บฟอนต์

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;
}

🚀🚀 เคล็ดลับการเพิ่มประสิทธิภาพ

ใช้ font-display: swap เพื่อป้องกัน FOIT
ใช้ preconnect เพื่อลดเวลาการค้นหา DNS
โหลดเฉพาะน้ำหนักฟอนต์ที่จำเป็นเท่านั้น
จำกัดชุดตัวอักษรด้วยพารามิเตอร์ subset
ตั้งค่าฟอนต์สำรองในเครื่อง

ตัวอย่างการโหลดที่ปรับให้เหมาะสม:

<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;
}

🔍🔍 การดีบักและการทดสอบ

การตรวจสอบการโหลดฟอนต์:

ตรวจสอบไฟล์ฟอนต์ในแท็บ Network ของ DevTools
ตรวจสอบฟอนต์ที่ใช้จริงใน Computed styles
ทดสอบพฤติกรรม font-display

เครื่องมือวัดประสิทธิภาพ:

Google PageSpeed Insights
WebPageTest
การตรวจสอบการเพิ่มประสิทธิภาพฟอนต์ Lighthouse

폰트 fallback 테스트:

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

💡💡 เคล็ดลับการปฏิบัติ

การตั้งค่าโปรเจกต์:

กำหนดกฎฟอนต์ในระบบการออกแบบ
กำหนดกลยุทธ์การโหลดฟอนต์
กำหนดค่าฟอนต์สำรอง
ตั้งค่าการตรวจสอบประสิทธิภาพ

การบำรุงรักษา:

การจัดการเวอร์ชันฟอนต์
ล้างน้ำหนักที่ไม่ได้ใช้
การตรวจสอบประสิทธิภาพอย่างสม่ำเสมอ
ตรวจสอบการอัปเดตฟอนต์ใหม่