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

จากบทความที่แล้วผมเขียนเรื่องการเรียกใช้ Google Fonts บนเว็บไซต์ของเราไว้ คราวนี้ผมจะเขียนเรื่องการเรียกใช้ Font ในเว็บไซต์ของเราอย่างง่ายๆจากโฮสต์ครับ

ตัวอย่างในโค้ด CSS ก็จะเขียนประมาณนี้ครับ (ให้ตัวอักษรในแท็ก p ใช้ฟอนต์ Kanit แบบหนา)

p{
font-family: 'Kanit', sans-serif;
font-weight:bold;
}

ผมโหลดไฟล์ฟอนต์ที่ผมจะใช้มาแล้ว และผมจะใช้แค่ 3 น้ำหนัก คือ normal, medium และ bold ผมก็แค่เก็บไฟล์ไว้ใน folder ที่ผมต้องการ ซึ่งส่วนใหญ่ผมชอบเก็บไว้ใน folder ชื่อ assets แล้วก็ข้างในมี folder ที่ชื่อ fonts อีกทีนึง

การเขียนโค้ดสำหรับทำให้ระบบเรารู้จัก font ที่เราจะใช้ก็ตามด้านล่างนี้เลยครับ เป็นคำสั่ง @font-face

@font-face {
	font-family: "Kanit";
	src: url("assets/fonts/Kanit.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
  
@font-face {
	font-family: "Kanit";
	src: url("assets/fonts/Kanit-Medium.ttf") format("truetype");
	font-weight: medium;
	font-style: normal;
}
@font-face {
	font-family: "Kanit";
	src: url("assets/fonts/Kanit-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

เราก็จะสามารถเรียกใช้งานฟอนต์ตัวนี้ได้แล้วครับ ในไฟล์ CSS ของเรา ซึ่งปกติผมก็เขียนใน style.css ของธีมหลักนั่นแหละครับ