ติดตั้งฟอนท์พิเศษบนเว็บ

อยากมีฟอนต์สวย ๆ บนเว็บทำยังไง

อยากให้หน้าเว็บที่สร้างขึ้นมีฟอนท์สวย ๆ ไม่เหมือนฟอนท์ทั่วไป ทำยังไงครับ

ฟอนท์สำหรับเว็บนั้นยังมีข้อจำกัดอยู่หลายอย่าง แต่ด้วยเทคโนโลยีที่เปลี่ยนไป 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/

About the author