เปลี่ยน font web ให้แตกต่าง

เปลี่ยน font web นานๆจะมีเรื่องความรู้มาเขียนซักที ไม่ใช่อะไรหรอก พอดีทำเว็บลูกค้าแล้วต้องใช้เลยต้องหาข้อมูลเหอะๆๆ ผมเจอกรณี ธีม wordpress ที่โมไม่ support ภาษาไทย พิมพ์ไทยใส่ไป หายเงียบ กิ๊บ ….. ต้องมา เปลี่ยน font web ให้มัน Support

มา มา มา เข้าเรื่องๆ

ก่อนอื่นเลย ไปที่ Fontface Generator เพื่อ gen file ง่ายฝุดๆ

กด +Add Font  เลือก Expert

ในช่อง Subsetting: เลือก No Subsetting จากนั้นก็เช็คถูกหน้าบรรทัดที่ว่า

Yes, the fonts I’m uploading are legally eligible for web embedding.

เสร็จแล้ว กดปุ่ม Download your Kit

ก็ได้ไฟล์ชื่อ webfontkit แตกไฟล์ออกมาจะพบกับไฟล์ font ที่เราจับมัน add ไปเมื่อกี๋เป็นรูป

eot, svg, tff, woff บราบราบรา และไฟล์ต่าง ๆ เช่น

demo.html

stylesheet.css

config เป็นต้น

ให้เราทำการ upload ทั้ง folder ไปไว้ใน hosting

เสร็จแล้วเปิด stylesheet.css ขึ้นมา

จะเจอข้อความประมาณว่า

@font-face {
font-family: ‘RDCHULAJARUEKRegular’;
src: url(‘fontname.eot’);
src: url(‘fontname.eot?#iefix’) format(‘embedded-opentype’),
url(‘fontname.woff’) format(‘woff’),
url(‘fontname.ttf’) format(‘truetype’),
url(‘fontname.svg#RDCHULAJARUEKRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

ให้ทำการแก้ไขนิดนึงในส่วนของ
url(‘fontname.eot
ให้แก้ให้เป็น path ที่อยู่ของเว็บอย่าง
url(‘http://blog.may.in.th/font/fontname/fontname.eot’);
แก้ทุก ๆ บรรทัดที่ขึ้นต้นด้วย url นะครับ

จากนั้นก็ก๊อปปี้ไปใส่ส่วนด้านบนของ stylesheet ที่เราต้องการแก้ไข
แล้วก็ค้นหาในส่วนของ
font-family: Arial, Helvetica, Sans-Serif;
ให้เป็น
font-family: fontname;
ทุก ๆ บรรทัด ก็เป็นอันเรียบร้อยครับ

 

Comments

comments

Related posts: