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

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

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

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

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

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

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

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

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

ปลั๊กอิน seedfont

ปลั๊กอินนี้สร้างโดยธีมงาน SeedThemes  ซึ่งเขาได้เตรียมฟอนต์ มาให้เราใช้งาน 8 ฟอนต์ด้วยกัน ทั้งแบบมีหัวและไม่มีหัว รายชื่อฟอนต์มีดังนี้ “Athiti”, “Kanit”, “Mirt”, “Prompt”, “Cloud”, “TH Sarabun”, “Boon”, “CS Prajad”

2. วิธีใช้งาน

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

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

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

ดูวิธีใช้งานแบบเป็นคลิปวีดีโอจากทีมงาน Seedtheme คลิกที่รูปภาพได้เลยครับ

seed font clip

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

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 แทน และทำการลบไฟล์ที่ไม่จำเป็นออกไป ก็จะเหลือไฟล์ฟอนต์ที่จำเป็นต้องใช้ดังรูป

file font use

คอร์สเรียน 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

file-manager

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

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

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

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

font folder

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

seed font php file

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

เปลี่ยน font

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

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

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

หลังเปลี่ยนฟอนต์

==========

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

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

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

รายละเอียดคอร์สเรียน

SEO WordPress

  • ค่าเรียน 5,500 บาท
  • เรียนวันเสาร์ที่ 22 ธันวาคม 2561
  • ระยะเวลาเรียน 6 ชั่วโมง
  • เราเปิดสอน 1 รอบ
    รอบเช้า 10.00 – 16.00 น. (ว่าง)
  • เรียนกลุ่มเล็กรอบละ 10 คนเท่านั้น
  • สถานที่เรียน Seatz Station
  • ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
  • จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ
ดูรายละเอียดเพิ่มเติม

ตัวอย่างผลงาน SEO Ranking ของเรา

ทำ seo
อบรม SEO