Seed Fonts

Seed Fonts ปลั๊กอินฟอนต์ของคนไทย

สวัสดีครับ พบกันอีกแล้วสำหรับบทความใน Themevilles นี้ วันนี้ผมจะมาพูดถึงเรื่องการใช้ปลั๊กอินจัดการฟอนต์ของ WordPress ที่ชื่อว่า Seed Fonts กันนะครับ ว่าเป็นปลั๊กอินอะไร ใช้งานอย่างไรเรามาดูกันเลย

Seed Fonts

Seed Fonts เป็นปลั๊กอินช่วยจัดการในเรื่องของฟอนต์ของ WordPress ที่ถูกพัฒนาจากทีมงานคนไทยและให้ใช้บริการฟรี โดยมีรายการฟอนต์ (Font Family) ให้เลือกทั้งภายในตัวปลั๊กอินเองหรือเลือกจาก Google Fonts เราสามารถนำมาใช้โดยทำการเปลี่ยนฟอนต์ทั้งในส่วนของส่วนหัว (Header) หรือส่วนเนื้อหา (Paragraph) หน้าตาเว็บไซต์ของเราก็จะเปลี่ยนไปทำให้สวยงามและน่าสนใจมากยิ่งขึ้น

วิธีการใช้งาน

ให้เราทำการติดตั้งปลั๊กอิน Seed Fonts เหมือนกับปลั๊กอินทั่วไป โดยไปที่เมนู Plugins > Add New แล้วทำการค้นหาปลั๊กอิน ทำการติดตั้ง (Install Now) และเปิดใช้งาน (Activate)

เมื่อทำการเปิดใช้งานแล้วให้เราเปิดไปหน้าตั้งค่าที่เมนูรูปแบบเว็บ (Appearance) > ฟอนต์ (Fonts) ครับ

Seed Fonts Setting
Seed Fonts Setting

หลังจากเข้ามาแล้ว เราจะเห็นแท็บอยู่ 2 แท็บด้วยกันครับ คือ แท็บพาดหัว และแท็บส่วนเนื้อหา ซึ่งทั้ง 2 แท็บนี้แบ่งส่วนการตั้งค่าแตกต่างกัน คือ แท็บพาดหัวจะเกี่ยวกับส่วนหัวข้อ (Heading) ต่างๆ และแท็บส่วนเนื้อหาจะเกี่ยวกับเนื้อหา (Paragraph) ทั้งหมด หากเราต้องการแก้ไขในส่วนใดให้ทำการแก้ไขในแท็บนั้นครับ เราสามารถทำการแก้ไขได้ทั้ง 2 แท็บพร้อมกัน

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

สอน WordPress หรือ WooCommerce
สอน WordPress หรือ WooCommerce

สำหรับฟอนต์ที่มากับปลั๊กอิน บางฟอนต์จะเป็นฟอนต์ที่ไม่มีในรายการ Google Fonts ครับ ฟอนต์จะมีทั้งแบบมีหัวและไม่มีหัวขึ้นกับเราว่าต้องการใช้งานแบบใด โดยมีรายชื่อฟอนต์ได้แก่ Anakotmai, Nano San Thai, Cloud, Moonjelly, Nato Serif Thai, Sarabun, Boon, CS Prajad, และ CS Chatchai UI ในการใช้ฟอนต์นี้เราสามารถทำการตั้งค่าน้ำหนักหรือความหนาของฟอนต์ได้ หากค่าน้ำหนักมีค่าสูงก็จะทำให้ฟอนต์ของเรามีความหนามากยิ่งขึ้น

ส่วนถัดมาเป็นส่วนสำคัญของการใช้งาน Seed Fonts เลยครับ โดยเราจะต้องทำการใส่ Selectors หรือแท็ก HTML ที่เราต้องการ เช่น h1 เป็นต้น หากเราไม่ทราบก็จะต้องใช้เครื่องมือของเบราเซอร์ที่ชื่อว่า Developer Tools (กด Ctrl + Shift + I) ในการค้นหา Selector ที่เราจะใช้ครับ เช่น หากเราต้องการให้หัวข้อหรือส่วนใดใช้งานฟอนต์นี้ ก็ต้องใช้ เครื่องหมายลูกศรที่อยู่ด้านบนของ Developer Tools ไปจิ้มในส่วนที่เราต้องการ และดูว่า Selectors ที่เขาใช้เป็นอะไร จากรูปจะเห็นว่า ส่วนหัวข้อที่เราต้องการนั้นมี Selector ชื่อ h1 เป็นต้น

Developer Tools
Developer Tools

เมื่อเราได้ Selectors ที่ต้องการแล้วก็ให้นำไปใส่ต่อท้ายในกล่องข้อความ และต้องมีคอมม่า (,) คั่นระหว่าง Selectors แต่ละตัวด้วยนะครับ

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

สำหรับส่วนที่แตกต่างระหว่างแท็บหัวข้อ (Header) และข้อความ (Paragraph) นั้นจะเพิ่มเติมในส่วนของขนาดตัวอักษร หน่วย และระยะห่างระหว่างบรรทัด (Line Height) ครับ ซึ่งขนาดตัวอักษรที่มักจะใช้กันอยู่ที่ 16px และระยะห่างระหว่างบรรทัดจะอยู่ที่ 1.5-1.8 จะเป็นระยะที่เหมาะสมที่สุดครับ

พอจะเห็นภาพการใช้งานของปลั๊กอินนี้แล้วนะครับ ลองนำไปใช้งานกันดู แล้วเว็บที่เป็นภาษาไทยของเราก็จะสวยขึ้นจากเดิมทันตาเลยครับ สำหรับบทความในวันนี้ก็ขอจบไว้เพียงเท่านี้ สวัสดีครับ

Seed Fonts ปลั๊กอินฟอนต์ของคนไทย 1
รับทำเว็บไซต์

บทความนี้มีประโยชน์สำหรับคุณหรือไม่?

ให้คะแนนบทความนี้

คะแนนเฉลี่ย / 5. จำนวนโหวต:

As you found this post useful...

Follow us on social media!

นายปิ๊ก


ผู้ก่อตั้งเว็บไซต์ Themevilles.com เป็นอาจารย์สอน WordPress และ WooCommerce ในเว็บคอร์สออนไลน์ Skilllane และรับทำเว็บไซต์ ทำการตลาดออนไลน์ เช่น SEO, Facebook และ LINE


Shares
สมัครสมาชิกเพื่อรับข้อมูลข่าวสาร
Get the latest content first.
Read about Privacy Policy.