วิธีการเปลี่ยน Font โดยแก้ไขโค้ดใน WordPress

นอกจากวิธีการเปลี่ยน Font โดยใช้ Plugin Seed Fonts (สามารถดูได้ที่ https://kb.hostatom.com/content/4900/) แล้ว แต่ถ้าหากผู้ใช้ต้องการเพิ่ม Font ภาษาไทย หรือ Font ที่ตนเองต้องการลงในเว็บ ก็สามารถทำได้ โดยมีขั้นตอนการทำ ดังนี้

วิธีที่ 2 การเปลี่ยน Font โดยแก้ไขโค้ด

1. ทำการค้นหาชื่อ Fonts ที่ต้องการ อาจจะโหลดมาจากเว็บที่มีบริการแจก Font ฟรี เช่น www.f0nt.com เป็นต้น เมื่อได้ Font ที่ต้องการแล้ว ทำการโหลด Font เพื่อเก็บไว้บนเครื่อง แต่ Font ที่โหลดมานั้น ยังไม่สามารถใช้งานได้ทันที ต้องทำการแปลงไฟล์ Font ให้เป็นไฟล์ที่สามารถใช้บนเว็บได้

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

1.1 ให้อัพโหลดFont ที่ต้องการแปลงขึ้นไปที่ fontsquirrel ในกรณีนี้ขอใช้ Font Lamoon ที่โหลดมาจาก f0nt.com โดยกดปุ่ม UPLOAD FONTS

1.2  เมื่ออัพโหลด Font แล้ว ให้คลิกเลือก Expert เพื่อแสดง option การตั้งค่า Font ขึ้นมา ให้ตั้งค่า Font ดังภาพ
จากนั้นกดปุ่ม Download Your Kit เพื่อโหลดไฟล์ font ที่แปลงแล้ว

3. ไฟล์ที่ดาวน์โหลดเป็นไฟล์ Zip ให้ทำการแตกไฟล์

จากนั้นเปลี่ยนชื่อไฟล์เป็นชื่อ Font ดังภาพ

4. จากนั้นทำการติดตั้ง Plugin FTP Manager เพื่อใช้โยนไฟล์ต่างๆ ขึ้นไปบน server โดยที่ไม่ต้องทำผ่าน FTP
โดยคลิกที่เมนู Plugin ด้านซ้ายมือ ค้นหา FTP Manager จากนั้นกดปุ่ม Install เพื่อติดตั้ง Plugin

จากนั้นกดปุ่ม Activate เพื่อให้ Plugin ใช้งานได้

5. ทำการดาวน์โหลด ไฟล์ seed-fonts.php โดยใช้ Plugin FTP Manager

6. แก้ไขไฟล์ seed-fonts.php ตรงส่วน funtion seed_fonts_get_fonts()
โดยให้ใส่โค้ด

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

จากนั้น ทำการบันทึกการแก้ไขโค้ด

7. ใช้ FTP Manager ทำการอัพโหลดไฟล์ Font ของเราขึ้นไป โดยให้นำทั้งโฟลเดอร์ไปไว้ที่ wp-content > plugin > seed-fonts > fonts ดังภาพ

8. นำไฟล์ seed-fonts.php ที่แก้ไขเรียบร้อยแล้วไปเก็บแทนที่ไฟล์ที่ดาวน์โหลดมา

9. ที่เมนูด้านซ้าย คลิกที่ Appearance > Fonts จะเข้าสู่หน้า Setting ของ Plugin จะเห็นรายชื่อฟอนต์ lamoon เพิ่มขึ้นมา ให้เลือก ดังภาพ

10.เมื่อตั้งค่าเรียบร้อยแล้ว หน้าเว็บของเราแบบอักษรจะเปลี่ยนไปตามที่เราตั้งค่า ดังรูป
ก่อนเปลี่ยน Font

หลังเปลี่ยน Font

Was this article helpful?

Related Articles