จากบทความที่แล้วผมเขียนเรื่องการเรียกใช้ 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 ของธีมหลักนั่นแหละครับ
One Response