วิธี เปลี่ยนฟอนต์ (font) เพิ่มฟอนต์ไทย ใน WordPress ด้วยปลั๊กอิน Seed Fonts

อัปเดทบทความ (12/03/62) การเปลี่ยนฟอนต์ WordPress

โดยส่วนใหญ่ธีมที่เป็น Premium Theme (ธีมที่เสียเงิน) เขาจะมีฟังชั่นการ เปลี่ยนฟอนต์ (font) มาให้เราอยู่แล้ว แต่พวกฟอนต์สวยๆ ที่เราเห็นเป็นฟอนต์ที่มาจาก Google (Google Font) ซึ่ง server ของฟอนต์เหล่านั้นตั้งอยู่ต่างประเทศ ทำให้เว็บเราโหลดช้าขึ้นเพราะต้องเสียเวลาโหลดฟอนต์ที่อยู่ไกล

การปิดฟังชั่น Google Font สำหรับเว็บที่อยู่ในไทย จะช่วยให้เว็บของเราโหลดเร็วขึ้นได้นั้นเอง แต่เราจะใช้วิธีติดตั้งฟอนต์สวยๆ ที่เราต้องการลงไปใน server ของเราแทนครับ

การปิดฟังชั่น Google Font

โดยส่วนใหญ่พวกพรีเมี่ยมธีม เขาจะมีฟังชั่นการ เปิด-ปิด Google Font มาให้เรา ซึ่งโดยส่วนใหญ่จะอยู่ที่ Theme option ของธีมนั้น

แต่ถ้าธีมของเราไม่มีฟังชั่นนี้ อาจลองใช้พวกปลั๊กอินในการปิดแทนก็ได้ ด้วยปลั๊กอินตัวนี้ได้ครับ

~~Disable Google Fonts~~

ฟอนต์ภาษาไทยใน Google Fonts

ในช่วงปีที่ผ่านมา บริษัทจัดทำฟอนต์ Cadson Demak ได้มีการอัพฟอนต์ขึ้นไปยัง Google Font ซึ่งตอนนี้มีฟอนต์ไทยที่เราสามารถนำมาใช้บนได้ฟรีประมาณ 26 ฟอนต์แล้วครับ

เข้าไปดูตัวอย่างฟอนต์ไทยสวยๆ ที่ Google Font ได้ที่นี่ครับ 26 Thai Google fonts set

google font

เราสามารถเรียนใช้งานฟอนต์เหล่านี้ บนเว็บ WordPress ผ่านปลั๊กอิน Seed Fonts ครับ

ขั้นตอนการ เปลี่ยนฟอนต์ (font) ด้วย Seed Fonts

1. ติดตั้งปลั๊กอิน Seed Fonts

ปลั๊กอินนี้สร้างโดยธีมงาน SeedThemes ซึ่งเขาได้เตรียมฟอนต์ มาให้เราใช้งาน 8 ฟอนต์ด้วยกัน ทั้งแบบมีหัวและไม่มีหัว รายชื่อฟอนต์มีดังนี้ “boon”, “cloud”, “cs-chatthai-ui, cs-prajad”, “moonjelly”, “noto-sans-thai”, “noto-serif-thai”, “sarabun”

นอกจากเราจะใช้ฟอนต์ที่ปลั๊กอินเตรียมมาให้แล้ว เรายังสามารถเรียกใช้งาน 26 ฟอนต์ จาก Google fonts ได้อีกด้วยครับ

2. วิธีใช้งาน เรียกฟอนต์จาก Google fonts

ให้เข้าไปที่ Appearance > Fonts แล้วคลิก Enable โดยเราสามารถเลือกฟอนต์ที่จะนำมาแสดงผลได้ 2 ฟอนต์ คือ ส่วนที่เป็นพวก Heading 1 ฟอนต์ และฟอนต์เนื้อหาทั่วไป (body) อีก 1 ฟอนต์

เปลี่ยนฟอนต์ wordpress

(1) เข้าสู่หน้า Font Settings

(2) เลือกประเภทของฟอนต์ พากหัว (heading) หรือ ส่วนเนื้อหา (body)

(3) ติ๊กเปิดใช้งาน และเปิดใช้งานการเรียกใช้ฟอนต์จาก Google

(4) พิมพ์ชื่อฟอนต์จาก Google fonts ที่เราต้องการลงไป *โดยต้องพิมพ์ตัวอักษรให้ตรงกับที่ Google fonts ถ้าชื่อเขาพิมพ์เป็นพิมพ์ใหญ่ เราก็ต้องพิมพ์เป็นตัวพิมพ์ใหญ่เช่นเดียวกันครับ

(5) เลือกขนาดฟอนต์ที่เราต้องการ

(6) ติ๊กเพื่อเพิ่มคำสั่งบับคับใช้กับเว็บเรา ต้องติ๊กเสมอฟอนต์ที่หน้าเว็บถึงจะเปลี่ยนนะ

Selector คือ จุดสำคัญที่จะทำให้ฟอนต์เปลี่ยน ในตำแหน่งที่เราต้องการหรือไม่ บางครั้งตำแหน่งจริงบนเว็บไซต์ของอาจอยู่นอกเหนือจากจากค่า default ที่ปลั๊กอินนี้ใส่มาให้ เราก็ต้องใช้วิธี inspect element เพื่อหา class ของตำแหน่งฟอนต์บนเว็บของเรา ปล.ตรงจุดนี้อาจจะยากสักเล็กน้อยสำหรับมือใหม่

ดูวิธีการเปลี่ยนฟอนต์ WordPress แบบเป็นคลิปวีดีโอ

มีแค่เว็บที่มีคุณภาพดีเท่านั้น ถึงจะมีโอกาสติดหน้าแรก Google ได้ ไม่ต้องเสียเวลาเรียนรู้เอง ผมขอแนะนำให้มาเรียนครับ ดูรายละเอียด และค่าเรียนได้ที่นี่

สอนทำเว็บไซต์ ตัวต่อตัว สอน WordPRess ตัวต่อตัว

หากเราต้องการเพิ่มฟอนต์ไทยสวยๆ เพิ่มเติมหล่ะ เราจะทำกันอย่างไร?

1. เราต้องรู้ว่าฟอนต์สวยๆ ที่เราอยากได้ หรือที่เราเห็นจากเว็บอื่นๆ เขาใช้ฟอนต์ชื่อว่าอะไร และเป็นฟอนต์ฟรี หรือว่าต้องเสียเงินซื้อ ลองเข้าไปดู วิธีเช็คฟอนต์ที่นี่ ก่อนเลยครับ

2. เอาชื่อฟอนต์ที่เราต้องการมาแปลงเป็น web font ก่อน หมายความว่าพวกฟอนต์สวยๆ ที่เราโหลดมาจากเว็บแจกฟอนต์ เช่น http://www.f0nt.com/ เป็นฟอนต์ที่ไว้ใช้งานบนเครื่องคอมได้อย่างเดียว ยังไม่สามารถเอาไปใช้บนเว็บได้ เราต้องแปลงไฟล์ฟอนต์กันก่อน

สำหรับเว็บที่ใช้สำหรับแปลงไฟล์ฟอนต์ คือ fontsquirrel.com ขั้นตอนการแปลงฟอนต์มีดังนี้

2.1 ให้อัพโหลดฟอนต์ที่เราต้องการแปลงขึ้นไปที่ fontsquirrel สำหรับบทความนี้ผมต้องการแปลงฟอนต์ชื่อว่า Supermarketที่ผมได้โหลดมากจากเว็บ f0nt.com

2.2 หลังจากอัพโหลดฟอนต์ขึ้นไปแล้ว ให้เราคลิก Expert มันจะแสดง option การตั้งค่าฟอนต์ขึ้นมา ให้เราตั้งค่าฟอนต์ตามรูปได้เลยครับ

web font setting

3. ทำการแตกซิปไฟล์ฟอนต์ และ rename ชื่อโฟลเดอร์ไฟล์นั้น ให้เป็นชื่อฟอนต์ที่เราต้องการครับ

4. ภายในโฟลเดอร์ฟอนต์ แก้ชื่อไฟล์ stylesheet.css ให้เป็น font.css แทน และทำการลบไฟล์ที่ไม่จำเป็นออกไป ก็จะเหลือไฟล์ฟอนต์ที่จำเป็นต้องใช้ดังรูป

คอร์สเรียน SEO WordPress

5. ต้องมีการแก้โค้ดที่ตัวปลั๊กอิน seedfont สักเล็กน้อย เข้าไปโหลดไฟล์ที่ต้องใช้ในการ config ปลั๊กอินที่นี่ครับ seed-fonts.php และให้เพิ่มโค้ดด้านล่างเข้าไปที่ส่วนของ function seed_fonts_get_fonts

โค้ดที่ต้องเอาไปใส่เพิ่มคือ

“ชื่อฟอนต์ของเรา” => array(
              “font”     => “ชื่อฟอนต์ของเรา”,
              “weights” => array( 300, 400, 500 )
              ),

ใส่โค้ดเสร็จแล้วก็จะได้หน้าตาประมาณนี้ครับ อย่าลืม save ไฟล์ให้เรียบร้อยด้วยนะ

font code

6. ติดตั้งปลั๊กอิน File Manager

โปรแกรมนี้เอาไว้ใช้โยนไฟล์ต่างๆ ขึ้นไปบน server โดยที่เราไม่ต้องทำผ่านสิ่งที่เรียกว่า FTP แต่เราจะสามารถทำที่หลังบ้านของเว็บ WordPress แทนได้เลยครับ

7. โยนโฟลเดอร์ฟอนต์ที่เราเตรียมไว้ตอนแรก เข้าไปที่โฟลเดอร์ Font ที่อยู่ในปลั๊กอิน Seed Font

ทำตามเสต็ปดังนี้ครับ ให้ไปที่ WP-File Manager ที่แถบเมนูหลังบ้าน WordPress

จากนั้นให้ไปที่โฟลเดอร์ wp-content > plugin > seed-fonts > fonts และให้เราอัพโหลดโฟลเดอร์ฟอนต์ที่เราเตรียมไว้ขึ้นไปเพิ่มครับ ปล. ลากโยนมาใส่ได้เลยทั้งโฟลเดอร์นะ

8. โยน seed-fonts.php ที่เราทำไว้ขึ้นไปแทนที่ตัวไฟล์ที่มีอยู่ในปลั๊กอิน

9. กลับเข้าไปดูในส่วนตั้งค่าของ ปลั๊กอิน seed font เราจะสังเกตเห็นรายชื่อฟอนต์ supermarket เพิ่มขึ้นมา ให้เราสามารถนำไปใช้งานต่อได้เลยครับ

สอนทำเว็บไซต์ ตัวต่อตัว สอน WordPRess ตัวต่อตัว

ตัวอย่างหน้าเว็บก่อน เปลี่ยนฟอนต์ (font)

ตัวอย่างหน้าเว็บหลัง เปลี่ยนฟอนต์ (font)

==========

ติดตามอ่านสาระน่ารู้ การทำเว็บไซต์สำหรับมือใหม่ ด้วย WordPress พร้อมกับให้ความรู้เรื่องการตลาดออนไลน์ และการปรับแต่ง SEO ให้ติดอันดับ google ได้ที่ padveewebschool.com

ประชาสัมพันธ์

สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการทำ SEO บน WordPress แบบจริงจัง ในวันเสาร์ที่ 14 สิงหาคม 2564 นี้ ผมได้เปิดคอร์สสอน SEO WordPress แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 10 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้