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

WordPress and Digital marketing

สอน wordpress การใช้ Easy Google Fonts

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

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

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

สอน wordpress เซตฟอนต์และสไตล์ให้กับ paragraph กับ header
ปกติแล้ว easy google fonts ให้เราเซตสไตล์ให้กับ paragraph กับ header

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

สอน wordpress เลือกฟอนต์และสไตน์สำหรับ tag paragraph
เลือกฟอนต์และสไตน์สำหรับ tag paragraph

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

สอน wordpress เลือกฟอนต์ที่ต้องการ ใน easy google fonts
เลือกฟอนต์ที่ต้องการ

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

สอน wordpress เลือกขนาดและลักษณะตัวอักษร
เลือกขนาดและสไตล์ของฟอนต์ว่าจะเอาตัวปกติหรือตัวเอียง

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

สอน wordpress การแต่งสไตล์ของฟอนต์
เลือกแต่งฟอนต์ว่าจะเป็นตัวขีดเส้นใต้ ขีดฆ่า หรือ ขีดบน

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

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

สอน wordpress การใส่สไตล์ให้กับ tag อื่น
หากต้องการใส่ฟอนต์และสไตล์ให้กับ tag อื่นๆจะต้องทำเป็น Control Name

หลักการคือให้คุณตั้งชื่อ (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 อีกที

สอน wordpress การเซตฟอนต์
Myfontcontrol ที่เราสร้างไว้จะมาปรากฏในเมนู Theme Typography

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

สอน wordpress การเซตฟอนต์
เลือกฟอนต์ Chonburi ให้กับ Myfontcontrol

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

สอน wordpress การเซตฟอนต์
ภายใต้ Control Name ยังเซตสไตล์เพิ่มเติมเกี่ยวกับสีและขนาดฟอนต์ของบล็อคนั้นได้

และในแท็ป Positioning

สอน wordpress การเซตฟอนต์
ภายใต้ Control Name ยังเซตสไตล์เพิ่มเติมเกี่ยวกับขอบของบล็อคนั้นได้

สรุป

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

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