การสร้าง Font ไว้เรียกใช้งานในเว็บไซต์ของเราด้วยตัวเองอย่างง่ายใน WordPress Theme

จากบทความที่แล้วผมเขียนเรื่องการเรียกใช้ Google Fonts บนเว็บไซต์ของเราไว้ คราวนี้ผมจะเขียนเรื่องการเรียกใช้ Font ในเว็บไซต์ของเราอย่างง่ายๆจากโฮสต์ครับ ตัวอย่างในโค้ด CSS ก็จะเขียนประมาณนี้ครับ (ให้ตัวอักษรในแท็ก p ใช้ฟอนต์ Kanit แบบหนา) ผมโหลดไฟล์ฟอนต์ที่ผมจะใช้มาแล้ว และผมจะใช้แค่ 3 น้ำหนัก คือ normal, medium และ bold ผมก็แค่เก็บไฟล์ไว้ใน folder ที่ผมต้องการ ซึ่งส่วนใหญ่ผมชอบเก็บไว้ใน folder ชื่อ assets แล้วก็ข้างในมี folder ที่ชื่อ fonts อีกทีนึง การเขียนโค้ดสำหรับทำให้ระบบเรารู้จัก font ที่เราจะใช้ก็ตามด้านล่างนี้เลยครับ เป็นคำสั่ง @font-face เราก็จะสามารถเรียกใช้งานฟอนต์ตัวนี้ได้แล้วครับ ในไฟล์ CSS ของเรา ซึ่งปกติผมก็เขียนใน style.css ของธีมหลักนั่นแหละครับ

การนำฟอนต์มาใช้งานในเว็บไซต์ง่ายๆจาก Google Fonts

การใช้งาน Google Fonts นั้นมีอยู่ 2 แบบนะครับ แบบแรกคือดาวน์โหลดมาไว้ในโฮสต์ของเว็บไซต์เรา แล้วเรียกใช้จากในโฮสต์ได้เลย หรือแบบหลังเรียกใช้โดยการโหลดตรงจาก Google เลย ซึ่งแบบแรกก็น่าจะเร็วกว่าเพราะเหมือนโหลดจากเครื่องคอมตัวเอง แต่อย่างหลังก็โหลดจากเว็บอื่น เลือกเอาตามสะดวก วิธีใช้งานนั้นก็ง่ายมากๆ ก่อนอื่นๆก็ค้นหาเลยครับ Google Fonts แล้วก็ตรงดิ่งเข้าไปในเว็บหลักได้เลย แล้วเราก็แค่เลือกฟอนต์ที่เราต้องการใช้งาน แล้วก็กดดาวน์โหลดมาได้เลยสำหรับการใช้งานในโฮสต์ส่วนตัว หรือจะให้หน้าเว็บเราโหลดตรงจาก Google เลยก็แค่กดเลือกน้ำหนักที่เราจะใช้ แล้วก็ copyโค้ดด้านขวามาใส่ในแท็ก head ของเว็บเราได้เลย เวลาเรียกใช้ก็เรียกเป็น font-family:’font-name’, snas-serif; ตามที่เค้าเขียนไว้ใน เว็บด้านขวามือได้เลย ตัวอย่างเช่นถ้าผมเลือก Kanit น้ำหนักปกติ กลางๆแล้วก็หนามา ผมก็จะได้โค้ดมาแบบนี้ เอามาใส่ในแท็ก head ของเว็บเราอย่างที่บอก แล้วเวลาเขียนโค้ดก็แค่กำหนด font family ด้วย css เหมือนด้านล่างนี้ แค่นี้เองครับ ง่ายๆ บทความถัดไปเดี๋ยวผมจะเขียนวิธีการเรียกใช้งานฟอนต์บนเว็บไซต์ส่วนตัวแปะไว้ให้