การแปลงไฟล์ของฟอนต์
โดยปกติไฟล์ฟอนต์ที่เราใช้ในเครื่องจะเป็น .ttf ซึ่งถ้าเป็นฟอนต์ที่ใช้บนเว็บจะใช้หลายรูปแบบกว่าเนื่องจากต้องใช้รองรับในหลายๆเบราว์เซอร์นั้นเอง
- หาดาวน์โหลดฟอนต์ที่ต้องการ แนะนำที่ f0nt มีฟอนต์ไทยสวยๆหลายตัวเลยครับ หรือ ใครมีไฟล์ฟอนต์นามสกุล ttf อยู่แล้วก็ไปข้อต่อไปได้เลยครับ
- หาเว็บไซต์ที่ช่วยแปลงไฟล์ได้ ที่ผมใช้เป็นประจำก็มีของ fontsquirrel
- เมื่อกด upload และ แปลงไฟล์เรียบร้อย เราก็จะได้ไฟล์นามสกุลต่างๆมาก็มี ttf eot woff เป็นต้น
- นำไฟล์ที่เราได้อัพโหลดเข้าไปที่ธีมเราได้ อาจจะอยู่ในโฟลเดอร์ชื่อ fonts ก็สะดวกดีครับ
การเรียกไฟล์ฟอนต์มาใช้งาน
เมื่อทำตามขั้นตอนด้านบนเรียบร้อย สามารถนำโค้ดด้านล่างไปใส่ไว้ใน css ของเราได้เลย
@font-face {
font-family: 'your_font';
src: url('fonts/your_font.eot');
src: url('fonts/your_font.eot?#iefix') format('embedded-opentype'),
url('fonts/your_font.woff2') format('woff2'),
url('fonts/your_font.woff') format('woff'),
url('fonts/your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
การเรียกใช้งานฟอนต์
สามารถเรียก div หรือ แท็กที่เราต้องการแล้วใส่ font-family ที่เราสร้างได้เลยเป็นอันเสร็จสิ้นครับ
h1,h2,h3,h4,h5,h6,.site-menu {
font-family: 'your_font';
}
ตามตัวอย่างด้านบน คือ สั่งให้ h1-h6 กับ div ชื่อว่า site-menu ใช้ฟอนต์นี้ครับผม
Narongchai Suphiratwanich (K)
นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย