วิธีใช้ Google Fonts ภาษาไทย — คู่มือสำหรับนักพัฒนาเว็บ

Google Fonts เป็นบริการฟอนต์ฟรีที่ได้รับความนิยมมากที่สุดในโลก มีฟอนต์ไทยให้เลือกกว่า 30 แบบ บทความนี้จะสอนวิธีใช้งาน Google Fonts อย่างมืออาชีพ

วิธีที่ 1: ใช้ Link Tag (แนะนำ)

วิธีที่ง่ายและเร็วที่สุดคือใช้ link tag ใน HTML head:

<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=Kanit:wght@400;700&display=swap" rel="stylesheet">

จากนั้นใช้ใน CSS:

body {
  font-family: 'Kanit', sans-serif;
}

วิธีที่ 2: ใช้ @import ใน CSS

หากต้องการ import ฟอนต์ใน CSS file โดยตรง:

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap');

body {
  font-family: 'Kanit', sans-serif;
}

หมายเหตุ: วิธีนี้อาจทำให้เว็บโหลดช้ากว่าวิธีแรกเล็กน้อย

การเลือก Font Weights

อย่าโหลดทุก weight! เลือกเฉพาะที่ใช้จริง เช่น:

• 400 (Regular) — สำหรับเนื้อหาทั่วไป
• 500 (Medium) — สำหรับเน้นเล็กน้อย
• 600 หรือ 700 (Bold) — สำหรับหัวข้อ
• ไม่ควรเกิน 3-4 weights ต่อฟอนต์

การใช้ font-display: swap

Google Fonts มี parameter display=swap ในตัว ซึ่งจะทำให้ข้อความแสดงด้วยฟอนต์ fallback ก่อน แล้วค่อยเปลี่ยนเป็นฟอนต์ที่โหลดเสร็จ ช่วยให้ผู้ใช้เห็นเนื้อหาเร็วขึ้น

การ Preconnect เพื่อเพิ่มความเร็ว

เพิ่ม preconnect ก่อน link ฟอนต์เพื่อให้ browser เริ่มเชื่อมต่อล่วงหน้า:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

การใช้หลายฟอนต์พร้อมกัน

สามารถโหลดหลายฟอนต์ใน request เดียว:

<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Sarabun:wght@400;500&display=swap" rel="stylesheet">

Fallback Font ที่เหมาะสม

กำหนด fallback font เผื่อกรณีโหลดไม่สำเร็จ:

body {
  font-family: 'Kanit', 'Tahoma', sans-serif;
}

เทคนิคขั้นสูง: Self-hosting

สำหรับความเร็วสูงสุด สามารถดาวน์โหลดฟอนต์มา host เองได้ ข้อดีคือไม่ต้องรอ request ไปยัง Google แต่ข้อเสียคือต้องอัพเดตเองเมื่อมีเวอร์ชันใหม่

สรุป

การใช้ Google Fonts ไม่ยาก แต่การใช้อย่างถูกวิธีจะช่วยให้เว็บของคุณโหลดเร็วและแสดงผลสวยงาม จำไว้ว่าให้โหลดเฉพาะ weight ที่ใช้จริง และใช้ preconnect เพื่อเพิ่มความเร็ว