การเพิ่มฟอนต์แบบทำลิงค์

เมื่อตอนที่แล้วผมได้แนะนำวิธีการเพิ่มฟอนต์เข้าไปในเว็บด้วยการโหลดฟอนต์มาติดตั้งเอง ข้อเสียคือต้องโหลดมาติดตั้ง ในตอนนี้จะแนะนำการเพิ่มฟอนต์โดยการทำลิงค์ไปยังเว็บที่ให้บริการฟอนต์ซึ่งจริงๆก็คือ google font นั่นแหละ

ถ้าคุณใช้ปลั๊กอิน Custom Fonts ในตอนที่แล้วอยู่ก็ต้อง Deactivate ไปครับ ต้องเลือกว่าจะใช้เทคนิคแบบลิงค์หรือแบบโหลดลงมา (จริงๆใช้ร่วมกันได้ แต่จะทำให้สับสนเปล่าๆ)

ต่อไปลงปลั๊กอินชื่อ Easy Google Fonts เพื่อการนี้ เมื่อติดตั้งให้เข้าไปดูใน Appearance -> Customize ปลั๊กอินจะเพิ่มเมนูมาให้อันหนึ่งชื่อว่า Typography แล้วเลือก Default Typography

ส่วนที่คุณสามารถเปลี่ยนฟอนต์ได้ก็คือ paragraph กับ heading ซึ่งก็เป็นส่วนใหญ่ของข้อความในเว็บอยู่แล้ว เมื่อคุณต้องการเปลี่ยนฟอนต์ในส่วนไหนก็ให้คลิกที่ Edit Font ในส่วนนั้น

ปลั๊กอินตัวนี้จะลิงค์เข้าหา google font ให้เอง คุณเพียงแต่ค้นหาชื่อฟอนต์ที่ต้องการ คลิกที่ Font Family แล้วพิมพ์ชื่อฟอนต์ อย่างเช่น taviraj อย่างในตอนแรก

ถัดลงคือ Font Weight/Style ใช้สำหรับใส่ความหนาของฟอนต์ ลองเล่นดูครับ (สังเกตดูจาก preview ทางขวาจะเปลี่ยนแปลงแบบ real time) เช่น 600 ตัวฟอนต์จะหนากว่า 500 ต้องการตัวเอียงก็เลือกที่ต่อท้ายด้วย Italic

ส่วน Text Decoration ก็เป็นการเลือกว่า ขีดเส้นใต้ (Underline) หรือ ขีดฆ่า (Line-through) หรือ ขีดเส้นบน (Overline)

เปลี่ยนฟอนต์ส่วนที่ไม่ใช้ paragraph กับ header

ที่ผ่านมาเป็นการเปลี่ยนฟอนต์ให้กับ paragraph และ header ซึ่งก็เป็นจุดที่คนส่วนใหญ่ต้องการเปลี่ยนอยู่แล้ว แต่ถ้าคุณต้องการเปลี่ยนฟอนต์ให้กับ link หรือ HTML tag อื่นๆก็ทำได้ครับ ให้ไปที่เมนู Settings -> Google Fonts

หลักการคือให้คุณตั้งชื่อ (Control Name) ให้กับ tag (หรือกลุ่มของ tag) ที่คุณต้องการจะเปลี่ยนฟอนต์ ตามตัวอย่างข้างต้น ผมต้องการให้เฉพาะบล็อคนี้ใช้ฟอนต์ chonburi ผมจะเซต class ของบล็อคนี้เป็น chonburi-font (ใน Gutenberg) แล้วผมจะใส่ p.chonburi-font (แล้วกด tab) ไว้ในช่อง Add CSS Selector จะต้องมี p กำกับด้วยนะครับ เพราะปลั๊กอินนี้ไม่รับชื่อ class อย่างเดียว (แต่ก็หมายถึงตำแหน่งเดียวกัน)

ส่วนอันที่สองผมใส่ u#main_menu li a อันนี้เป็น selector ของ เมนูหลักซึ่งผมต้องการให้เป็นฟอนต์ chonburi ด้วย สังเกตว่าต้องมี u# กำกับด้วยนะครับ

ดังนั้นต่อไปนี้หากเราต้องการบล็อคไหนให้ใช้ฟอนต์ chonburi ก็ใส่ class ชื่อ chonburi-font กำกับไว้ที่บล็อคนั้น ส่วนสไตล์ต่างๆเราก็ไปเซตที่ Customize -> Typography อีกที

คราวนี้คลิก Edit Font ภายใต้ Myfontcontrol ถ้าคุณสร้าง control name ไว้หลายอันก็เลือก Edit Font ภายใต้อันนั้น แล้วเลือก Font Family เป็น Chonburi (หรือที่คุณต้องการ)

นอกจากนี้คุณสามารถเลือกเซตสไตล์อื่นๆได้ในแท็ป Appearance

และในแท็ป Positioning

สรุป

ถ้าคุณต้องการฟอนต์ภาษาไทย(ผมสมมติว่าส่วนใหญ่เป็นเว็บไทยนะครับ) การเพิ่มฟอนต์โดยการลิงค์ไปยัง google font เป็นวิธีที่ง่ายที่สุด เหมาะสำหรับคนที่ไม่ต้องการความยุ่งยาก แต่อาจมีข้อเสียตรงที่ถ้า google อืด เว็บเราก็จะค้างตาม(ในบางครั้ง)ถ้าคุณไม่ซีเรียสก็ถือว่าโอเค คุณอาจจะซีเรียสถ้าคุณไปทดสอบประสิทธิภาพของเว็บคุณผ่านเว็บประเภท google pagespeed ซึ่งบางทีจะแนะนำให้คุณลดการติดต่อกับทรัพยากรภายนอก คุณก็อาจต้องเลี่ยงไปใช้วิธีแรก

ที่ผมแนะนำมานี่สำหรับคนที่ใช้เอดิเตอร์มาตรฐานของ WordPress นะครับ รวมทั้ง Gutenberg ด้วย ใครที่ใช้เลย์เอาท์เอดิเตอร์ตัวอื่นอยู่ เช่น King Composer, Elementor etc. ไม่ต้องลงปลั๊กอินตัวนี้นะครับเพราะว่ามันมีอยู่ในตัวอยู่แล้ว อย่างเช่น King Composer ก็เลือกเพิ่มฟอนต์ภาษาไทยที่ต้องการเข้าไปเลย elementor ก็ทำเป็นลิงค์ให้อยู่แล้ว