ตั้งค่า Google Fonts บน WordPress อย่างถูกต้อง

ใส่ฟอนต์สวยในเว็บ WordPress โดยไม่ทำให้โหลดช้าด้วยวิธีที่ถูกต้อง

ตั้งค่า Google Fonts บน WordPress อย่างถูกต้อง

บทนำ: ทำไม Google Fonts ถึงสำคัญและต้องตั้งค่าให้ถูก

ฟอนต์เป็นองค์ประกอบสำคัญที่กำหนดภาพลักษณ์ของเว็บไซต์ WordPress ฟอนต์ที่เหมาะสมช่วยให้เว็บดูมีคุณภาพและโปรเฟชชั่นมากขึ้น Google Fonts คือแหล่งรวมฟอนต์ฟรีคุณภาพสูงกว่า 1,400 แบบ ที่ได้รับความนิยมมากที่สุดในโลก แต่ปัญหาสำคัญที่หลายคนมองข้ามคือการใช้ Google Fonts อย่างไม่ถูกวิธีอาจทำให้เว็บโหลดช้าลง 20–30% และสร้างปัญหาด้าน GDPR กับผู้เยี่ยมชมจากยุโรปด้วย

บทความนี้จะสอนคุณ 3 วิธีในการเพิ่ม Google Fonts บน WordPress พร้อมแนะนำวิธี Self-host ฟอนต์บนเซิร์ฟเวอร์ตัวเอง เลือกฟอนต์ให้เหมาะสม ตรวจสอบว่าทำงานถูกต้อง และแก้ปัญหาที่พบบ่อย ถ้าคุณใช้ Shared Hosting ของ YourThaiHost ขั้นตอนทั้งหมดสามารถทำได้ผ่าน cPanel โดยไม่ต้องใช้ SSH เลย

วิธี 1: เพิ่ม Google Fonts ผ่าน Plugin (วิธีที่ง่ายที่สุด)

ถ้าคุณเป็นมือใหม่ใน WordPress วิธีนี้คือตัวเลือกที่ง่ายและปลอดภัยที่สุด Plugin จัดการทุกอย่างให้โดยไม่ต้องแตะโค้ดเลย

ขั้นตอนที่ 1: ติดตั้ง Plugin OMGF

  1. เข้า WordPress Admin Dashboard (yourdomainname.com/wp-admin)
  2. คลิก Plugins → Add New
  3. ค้นหา "OMGF" (Optimize My Google Fonts) ซึ่งเป็น Plugin ยอดนิยมมี 4.7 ดาว ติดตั้งโดย 50,000+ เว็บไซต์
  4. คลิก Install Now → Activate

OMGF โดดเด่นตรงที่มัน Self-host ฟอนต์ Google ให้คุณโดยอัตโนมัติ ฟอนต์จะมาจากเซิร์ฟเวอร์ของคุณเองแทน Google ตัวจริง ทำให้เร็วขึ้นและหลีกเลี่ยงปัญหา GDPR ไปด้วยในคราวเดียว

ขั้นตอนที่ 2: ตั้งค่า Plugin

  1. ไปที่ Settings → OMGF
  2. ในแถบ "Optimization" เลือก "Automatically Optimize" เพื่อให้ Plugin ตรวจหา Google Fonts ที่ใช้อยู่ในเว็บโดยอัตโนมัติ
  3. กดปุ่ม "Save & Optimize" เพื่อให้ Plugin ดาวน์โหลดฟอนต์และ Host บนเซิร์ฟเวอร์ของคุณ
  4. เปิดใช้ "Remove Google Fonts from " เพื่อตัด Request ไปยัง Google ออกให้หมด
Tip: หลังกด Save แล้ว ให้ Flush Cache ของ Caching Plugin (เช่น W3 Total Cache หรือ WP Super Cache) ด้วย มิฉะนั้นเบราว์เซอร์อาจแสดงฟอนต์เก่าต่อไปอีกสักพัก

Plugin ตัวอื่นที่น่าใช้คือ WP Google Fonts ซึ่งให้คุณเลือกฟอนต์จาก Library ได้โดยตรงและเพิ่มลงเว็บได้ทันที แต่ไม่ได้ Self-host ให้อัตโนมัติเหมือน OMGF

วิธี 2: เพิ่ม Google Fonts ผ่าน Theme Customizer (สำหรับ Theme ที่รองรับ)

ถ้า WordPress Theme ของคุณมีฟังก์ชัน Typography ในตัว คุณสามารถเลือกฟอนต์ได้โดยตรงจาก Customizer โดยไม่ต้องติดตั้ง Plugin เพิ่ม

ขั้นตอนที่ 1: เข้า Theme Customizer

  1. ไปที่ WordPress Admin → Appearance → Customize
  2. มองหาเมนู "Typography" หรือ "Fonts" ในแถบด้านซ้าย
  3. ถ้าไม่เห็น ลองมองใน "Theme Options" หรือ "General Settings"

ขั้นตอนที่ 2: เลือกฟอนต์ที่ต้องการ

  1. คลิก "Body Font" หรือ "Main Font" จะเห็น Dropdown รายการฟอนต์ทั้งหมด
  2. เลื่อนไปยัง Section "Google Fonts" มีให้เลือกกว่า 1,000 แบบ
  3. เลือกฟอนต์ที่ชอบ เช่น "Roboto", "Open Sans", หรือ "Noto Sans Thai" สำหรับเว็บภาษาไทย
  4. ทำซ้ำสำหรับ "Heading Font" ถ้า Theme รองรับการแยกฟอนต์หัวข้อ

ขั้นตอนที่ 3: บันทึกการตั้งค่า

  1. กดปุ่ม "Publish" ด้านบนซ้ายของ Customizer
  2. เปิดหน้าแรกเว็บไซต์ในแท็บใหม่เพื่อตรวจสอบฟอนต์ที่เปลี่ยนไป
Tip: วิธีนี้ใช้ได้เฉพาะ Theme ที่รองรับ Google Fonts ในตัวเท่านั้น Theme ฟรีส่วนใหญ่เช่น Astra, OceanWP, GeneratePress มีฟีเจอร์นี้ครบ ถ้า Theme ของคุณไม่มี ให้ใช้วิธี 1 หรือวิธี 3 แทน

วิธี 3: เพิ่ม Google Fonts ด้วยการแก้ไขโค้ดใน Child Theme

วิธีนี้ให้การควบคุมมากที่สุด เหมาะสำหรับผู้ที่ต้องการเลือก Weight และ Style ของฟอนต์เองทุกตัว หรือ Theme ไม่รองรับการตั้งค่าผ่าน Customizer

ขั้นตอนที่ 1: สร้าง Child Theme (ถ้ายังไม่มี)

ห้ามแก้ไข Theme ตัวแม่โดยตรง เพราะการอัพเดท Theme จะเขียนทับการเปลี่ยนแปลงหมด วิธีถูกต้องคือสร้าง Child Theme:

  1. เข้า cPanel ที่ YourThaiHost → File Manager
  2. ไปยังโฟลเดอร์ /wp-content/themes/
  3. สร้างโฟลเดอร์ใหม่ชื่อ mytheme-child (แทนที่ "mytheme" ด้วยชื่อ Theme จริง)
  4. สร้างไฟล์ style.css และ functions.php ภายในโฟลเดอร์นี้

ขั้นตอนที่ 2: เพิ่มโค้ดลงใน functions.php

คัดลอกโค้ดนี้ลงในไฟล์ functions.php ของ Child Theme:

คำอธิบายพารามิเตอร์สำคัญ:

ขั้นตอนที่ 3: เพิ่มโค้ด CSS ใน style.css

สร้างไฟล์ style.css ในโฟลเดอร์ Child Theme (ต้องมี header comment) และเพิ่มโค้ดนี้:

/*
 Theme Name:   My Theme Child
 Template:     mytheme
*/

body {
    font-family: 'Roboto', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    line-height: 1.3;
}
Tip: เพิ่ม -webkit-font-smoothing: antialiased ทุกครั้ง เพื่อให้ฟอนต์แสดงผลคมชัดบน macOS และ iOS โดยไม่ดูหนาเกินไป

จากนั้นไปที่ Appearance → Themes เลือก Child Theme และคลิก Activate

Self-Host Google Fonts บนเซิร์ฟเวอร์ตัวเอง (แนะนำมากที่สุด)

การ Self-host คือการดาวน์โหลดไฟล์ฟอนต์มาเก็บไว้ในเซิร์ฟเวอร์ของคุณเอง แทนที่จะเรียกจาก Google โดยตรง วิธีนี้แก้ปัญหาได้ 2 เรื่องพร้อมกัน:

ขั้นตอนที่ 1: Download ไฟล์ฟอนต์

  1. ไปที่ https://fonts.google.com เลือกฟอนต์ที่ต้องการ
  2. คลิก "Download family" ที่ด้านขวาบน จะได้ไฟล์ ZIP
  3. แตกไฟล์ ZIP จะได้ไฟล์ .ttf หลายไฟล์ตาม Weight ที่มี
  4. แปลงไฟล์ .ttf เป็น .woff2 (รูปแบบที่เบราว์เซอร์สมัยใหม่รองรับและขนาดเล็กกว่า) ผ่านเครื่องมือออนไลน์เช่น cloudconvert.com

ขั้นตอนที่ 2: อัพโหลดฟอนต์ขึ้น Server

  1. เข้า cPanel ที่ YourThaiHost → File Manager
  2. สร้างโฟลเดอร์ /wp-content/fonts/
  3. อัพโหลดไฟล์ .woff2 (และ .ttf เป็น fallback สำหรับ Browser เก่า)

ขั้นตอนที่ 3: สร้าง @font-face ใน CSS

เพิ่มโค้ดนี้ลงในไฟล์ style.css ของ Child Theme:

/* Self-hosted Google Fonts */
@font-face {
    font-family: 'Roboto';
    src: url('/wp-content/fonts/Roboto-Regular.woff2') format('woff2'),
         url('/wp-content/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/wp-content/fonts/Roboto-Bold.woff2') format('woff2'),
         url('/wp-content/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/wp-content/fonts/PlayfairDisplay-Bold.woff2') format('woff2'),
         url('/wp-content/fonts/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
Tip: ใช้ font-display: swap ทุกครั้งเพื่อป้องกัน FOIT (Flash of Invisible Text) คือช่วงที่ข้อความหายไปขณะรอโหลดฟอนต์ เบราว์เซอร์จะแสดง Fallback Font ก่อนแล้วค่อย Swap เมื่อพร้อม

เมื่อ Self-host เสร็จแล้ว ไม่จำเป็นต้องมี wp_enqueue_style('google-fonts-...') ใน functions.php อีกต่อไป ลบออกได้เลย

เลือกฟอนต์ที่เหมาะสมสำหรับเว็บ WordPress

ไม่ใช่ฟอนต์ทุกตัวจะเหมาะกับเว็บ ฟอนต์บางแบบออกแบบมาสำหรับสื่อสิ่งพิมพ์และดูแย่บนจอภาพ นี่คือรายการฟอนต์แนะนำสำหรับแต่ละส่วนของเว็บ:

สำหรับ Body Text (เนื้อหาบทความ)

เลือกฟอนต์อ่านง่าย เรียบง่าย และชัดเจนในขนาดเล็ก:

สำหรับ Headings (หัวข้อ)

ฟอนต์ Heading สามารถโดดเด่นกว่า Body ได้ เพื่อสร้าง Visual Hierarchy:

กฎทอง: ไม่ควรใช้ฟอนต์เกิน 2–3 ตัวในเว็บเดียวกัน เพราะแต่ละฟอนต์ต้องใช้ HTTP Request เพิ่มขึ้น ยิ่งใช้มากยิ่งช้า และยิ่งดูรก แนะนำ 1 ฟอนต์สำหรับ Heading + 1 สำหรับ Body ก็เพียงพอ

ตรวจสอบว่า Google Fonts ทำงานถูกต้อง

หลังติดตั้ง Google Fonts แล้ว ต้องตรวจสอบให้มั่นใจว่าฟอนต์โหลดได้จริง และไม่สร้างปัญหาด้านประสิทธิภาพ

วิธีตรวจสอบผ่าน Browser Developer Tools

  1. เปิดหน้าแรกของเว็บ WordPress ในเบราว์เซอร์
  2. กด F12 (หรือ Cmd+Option+I บน Mac) เพื่อเปิด DevTools
  3. คลิกแถบ "Network" จากนั้นกรองด้วย "Font"
  4. รีเฟรชหน้า (Ctrl+R)
  5. ตรวจสอบว่ารายการฟอนต์แสดง Status Code 200 ไม่ใช่ 404 หรือ 0

ตรวจสอบว่าฟอนต์ถูก Apply บน Element จริง

/* วิธีตรวจสอบผ่าน DevTools > Elements panel */

1. คลิกขวาที่ข้อความบทความ → "Inspect"
2. ในแถบ "Styles" ด้านขวา มองหา font-family
3. ตรวจสอบว่าค่า font-family ตรงกับที่ตั้งค่าไว้

/* ตัวอย่างที่ถูกต้อง: */
body {
    font-family: "Roboto", -apple-system, sans-serif;  /* Roboto ต้องขึ้นก่อน */
}

/* ตัวอย่างที่ผิด (ฟอนต์ไม่ถูก apply): */
body {
    font-family: -apple-system, BlinkMacSystemFont;  /* ไม่มี Roboto = โหลดไม่สำเร็จ */
}
วิธีอ่านผล: ใน DevTools แถบ "Computed" ให้ดูที่ font-family ถ้าแสดงชื่อฟอนต์ที่คุณตั้งค่าเป็นตัวแรก แสดงว่าทำงานถูกต้อง ถ้าแสดงฟอนต์ Fallback (เช่น Arial หรือ -apple-system) แสดงว่าฟอนต์หลักยังโหลดไม่ได้

ทดสอบผลกระทบต่อความเร็วด้วย PageSpeed Insights

  1. ไปที่ https://pagespeed.web.dev
  2. ใส่ URL เว็บ WordPress ของคุณ แล้วกด "Analyze"
  3. มองหาการแจ้งเตือน "Eliminate render-blocking resources" ถ้า Google Fonts ปรากฏที่นี่ หมายความว่าฟอนต์ชะลอการโหลดหน้าเว็บ
  4. มองหา "Reduce unused CSS" ถ้า Google Fonts โหลด Weight ที่ไม่ใช้ ให้ตัดออก
เป้าหมาย: Google Fonts ที่ตั้งค่าถูกต้องจะไม่ปรากฏใน "render-blocking resources" คุณควรเห็น LCP (Largest Contentful Paint) ต่ำกว่า 2.5 วินาที และ CLS ต่ำกว่า 0.1 หลังใช้ font-display: swap

แก้ปัญหาที่พบบ่อย

การตั้งค่า Google Fonts มักไม่ซับซ้อน แต่มีปัญหาบางอย่างที่พบบ่อยและต้องรู้วิธีแก้ไข

Error: ฟอนต์ไม่โหลด เบราว์เซอร์แสดง Fallback Font แทน

สาเหตุหลัก: URL Google Fonts ผิด หรือชื่อฟอนต์สะกดไม่ถูก หรือมี Cache ค้างอยู่

วิธีแก้ทีละขั้น:

  1. ตรวจสอบ URL ใน functions.php ให้แน่ใจว่าขึ้นต้นด้วย https://fonts.googleapis.com/css2?family=
  2. ตรวจสอบชื่อฟอนต์: "Roboto" ต้องมี R ตัวใหญ่, "Open Sans" ต้องเว้นระหว่างคำด้วย + เช่น Open+Sans
  3. ถ้าใช้ Plugin OMGF ให้คลิก "Clear Cache" แล้ว "Scan Again"
  4. ล้าง Browser Cache: Ctrl+Shift+Delete เลือก "All Time" แล้วลบ Cached images and files

Error: เว็บโหลดช้าลงหลังเพิ่ม Google Fonts

สาเหตุหลัก: โหลด Weight และ Style มากเกินจำเป็น หรือ DNS Lookup ไปยัง Google ใช้เวลานาน

วิธีแก้:

  1. โหลดแค่ Weight ที่ใช้จริงเท่านั้น เช่น wght@400;700 แทนที่จะเป็น wght@100;200;300;400;500;600;700;800;900
  2. รวม Font Family หลายตัวใน Request เดียว: family=Roboto:wght@400;700&family=Playfair+Display:wght@700
  3. เปลี่ยนไปใช้วิธี Self-host ตามที่อธิบายไว้ในมาตราก่อนหน้า เพื่อตัด External DNS Lookup ออก
  4. เพิ่ม Preconnect Hint ใน เพื่อให้เบราว์เซอร์เชื่อมต่อกับ Google ล่วงหน้า:

Error: Mixed Content Warning — "fonts loaded over HTTP"

สาเหตุหลัก: เว็บใช้ HTTPS แต่ URL Google Fonts ในโค้ดยังเป็น HTTP

วิธีแก้:

  1. ค้นหาใน functions.php ด้วย http://fonts.googleapis.com แล้วเปลี่ยนเป็น https://fonts.googleapis.com
  2. ถ้าใช้ Page Builder เช่น Elementor ให้ไปที่ Settings → Custom CSS และตรวจสอบทุก @import ที่ใช้ HTTP
  3. ติดตั้ง Plugin Really Simple SSL เพื่อให้มันแก้ Mixed Content โดยอัตโนมัติทั้งเว็บ

Error: GDPR Warning จาก Consent Platform (เช่น Cookiebot หรือ OneTrust)

สาเหตุหลัก: Google บันทึก IP address ของผู้เยี่ยมชมทุกครั้งที่เบราว์เซอร์เรียกไฟล์ฟอนต์จาก fonts.googleapis.com

วิธีแก้:

  1. Self-host Google Fonts บนเซิร์ฟเวอร์ของคุณเอง (วิธีที่แนะนำที่สุด) ตามขั้นตอนในมาตรา "Self-Host Google Fonts"
  2. ถ้าต้องการใช้ Google Fonts โดยตรง ให้โหลดฟอนต์หลัง Consent เท่านั้น โดยใช้ Google Tag Manager ที่ตั้งค่า Consent Mode v2
  3. ใช้ Plugin OMGF ที่มีตัวเลือก "GDPR: Remove Google Fonts" ในการตั้งค่าและ Self-host อัตโนมัติ

Error: ฟอนต์ดูเบลอหรือ Pixelated บนหน้าจอ Retina และ Mobile

สาเหตุหลัก: ไม่ได้เปิด Font Smoothing หรือขนาดฟอนต์เล็กเกินไปบน Mobile ทำให้ iOS Zoom อัตโนมัติ

วิธีแก้:

  1. เพิ่ม -webkit-font-smoothing: antialiased; และ -moz-osx-font-smoothing: grayscale; ใน CSS ของ body
  2. แน่ใจว่า font-size ของ body อย่างน้อย 16px บนหน้าจอมือถือ (ต่ำกว่านี้ iOS จะ Zoom อัตโนมัติ)
  3. ทดสอบบนอุปกรณ์จริง ไม่ใช่เพียง Emulator ใน DevTools เพราะ Retina Display แสดงผลต่างกัน

คำถามที่พบบ่อย

Q: ฉันใช้ Elementor หรือ Page Builder อื่นอยู่ ต้องทำวิธีข้างต้นทั้งหมดไหม?

A: ไม่จำเป็น Page Builder เช่น Elementor, WPBakery, Beaver Builder, Divi มีการรองรับ Google Fonts ในตัวอยู่แล้ว คุณสามารถเลือกฟอนต์ได้จาก Widget หรือ Global Typography Settings โดยไม่ต้องแก้โค้ด แต่ยังควรใช้ Plugin OMGF ควบคู่เพื่อ Self-host ฟอนต์และแก้ปัญหา GDPR

Q: ฟอนต์ที่ Self-host บนเซิร์ฟเวอร์ YourThaiHost จะเร็วกว่า Google CDN จริงไหม?

A: ขึ้นอยู่กับตำแหน่งของผู้เยี่ยมชม สำหรับผู้เยี่ยมชมในประเทศไทย เซิร์ฟเวอร์ไทยมักเร็วกว่า Google CDN เพราะ Latency น้อยกว่า แต่สำหรับผู้เยี่ยมชมจากต่างประเทศ Google CDN อาจเร็วกว่า ถ้าเว็บของคุณมีผู้ชมส่วนใหญ่ในไทย การ Self-host คุ้มค่ามาก นอกจากนี้การ Self-host ยังตัดปัญหา GDPR ออกได้ทั้งหมด

Q: ควรใช้ฟอนต์กี่ Weight สำหรับเว็บ WordPress ทั่วไป?

A: 2 Weight เพียงพอสำหรับเว็บส่วนใหญ่ คือ 400 (Regular สำหรับเนื้อหา) และ 700 (Bold สำหรับหัวข้อและข้อความเน้น) ถ้าต้องการ Italic ให้เพิ่ม 400italic ด้วย รวม 3 Variant ก็เพียงพอ การโหลด Weight 100, 200, 300, 500, 600, 800, 900 ที่ไม่ได้ใช้เป็นการสิ้นเปลืองทั้ง Bandwidth และเวลาโหลด

สรุป: วิธีเลือกและตั้งค่า Google Fonts บน WordPress อย่างถูกต้อง

มีให้เลือก 3 วิธีหลักตามระดับความชำนาญ:

  1. วิธี Plugin OMGF (ง่ายสุด, แนะนำ): ติดตั้ง OMGF Plugin เพียงตัวเดียว มัน Self-host ฟอนต์และแก้ปัญหา GDPR ให้อัตโนมัติ เหมาะกับทุกระดับ
  2. วิธี Theme Customizer: ถ้า Theme รองรับ Typography Settings ไปที่ Appearance → Customize → Typography แล้วเลือกฟอนต์ได้เลย ไม่ต้องแก้โค้ด
  3. วิธีแก้ไขโค้ดใน Child Theme: เพิ่ม wp_enqueue_style() ใน functions.php และ @font-face ใน style.css เพื่อการควบคุมสูงสุด

ไม่ว่าจะเลือกวิธีไหน จำหลักการสำคัญเหล่านี้ไว้:

ถ้าคุณต้องการความช่วยเหลือเพิ่มเติมในการตั้งค่า WordPress บน Shared Hosting ของ YourThaiHost ติดต่อทีมงานของเราผ่าน Live Chat หรือ Ticket Support ได้ 24 ชั่วโมง

บทความที่เกี่ยวข้อง