อยากให้หน้าเว็บที่สร้างขึ้นมีฟอนท์สวย ๆ ไม่เหมือนฟอนท์ทั่วไป ทำยังไงครับ
ฟอนท์สำหรับเว็บนั้นยังมีข้อจำกัดอยู่หลายอย่าง แต่ด้วยเทคโนโลยีที่เปลี่ยนไป CSS3 Browser รุ่นใหม่ ๆ สามารถอ่าน web-font ได้แล้ว เราจึงได้เห็น font บนหน้าเว็บหน้าตาไม่เหมือนเดิมอีกต่อไป วิธีทำก็ไม่อยากเลยครับ
วิธีการนำฟอนท์ที่ Generate เป็น web-font แล้ว มาใช้ให้ทำดังนี้
ให้ Upload font files ไปยัง directory นี้ http://www.yourwebsite.com/wp-content/uploads/fonts/ – ถ้าไม่มี folder fonts ให้สร้างขึ้นมาเองเลยครับ
จากนั้นไปที่ Theme Option > General > Custom CSS จากนั้นใส่ css ข้างล่างนี้เลยครับ
@font-face {
font-family: ‘Gruppo’;
src: url(‘http://www.yourwebsite.com/wp-content/uploads/fonts/Gruppo_reg.eot’);
src: url(‘http://www.yourwebsite.com/wp-content/uploads/fonts/fonts/Gruppo_reg.eot’) format(‘embedded-opentype’),
url(‘http://www.yourwebsite.com/wp-content/uploads/fonts/fonts/Gruppo_reg.woff’) format(‘woff’),
url(‘http://www.yourwebsite.com/wp-content/uploads/fonts/fonts/Gruppo_reg.ttf’) format(‘truetype’),
url(‘http://www.yourwebsite.com/wp-content/uploads/fonts/fonts/gruppo_reg.svg#Gruppo’) format(‘svg’);
}
และให้คุณเรียกใช้ฟอนต์ตรงนี้เลยครับ
body, p, h1 h2 {
font-family: ‘Gruppo’ !important;
}
วิธีการเพิ่มฟอนต์ของเราใน Font list
อ้างถึง function dt_stylesheet_get_websafe_fonts() ใน ../THEME-NAME/inc/extensions/stylesheet-functions.php line ~ 244
เพิ่ม font เข้าสู่รายชื่อฟอนท์ดังนี้
$fonts = array(
‘Gruppo’=> ‘Gruppo’,
แค่นี้คุณก็จะเจอฟอนท์ของคุณใน Theme Options > Fonts > font list !
CR. http://support.dream-theme.com/knowledgebase/add-custom-font/
