หลายท่านคงอยากจะหาฟอนต์ไทยสวยๆ มาใส่เว็บของเราแต่ไม่รู้วิธีการใช้งาน วันนี้ค่ะเราจะมาสอนการเอาฟอนต์ภาษาไทยใส่ลงในเว็บมีขั้นตอนง่ายๆดังนี้

1.เราต้องทำการเลือกฟอนต์ที่เราชอบก่อน ซึ่งปัจจุปันก็มีให้โหลดกันฟรีมากมาย ยกตัวอย่างจากเว็บนี้ f0nt.com เมื่อได้แล้วก็ทำการดาวน์โหลดฟอนต์แลัวทำการแตกซิปไฟล์รอไว้
ตัวอย่างฟอนต์

  • PINJOHN-cover
  • drdeco-cover

 
2.จากนั้นทำการ generate font ไปที่เว็บนี้ http://www.fontsquirrel.com/tools/webfont-generator อัพโหลดฟอนต์ของเราขึ้นไป
ดังตัวอย่าง

Sponsered link

font-generator-min
***ตรงสี่เหลี่ยมสีแดง จะต้องเลือกที่นี่เพื่อให้สามารถใช้ฟอนต์ไทยได้ จากนั้นทำการดาวน์โหลดเลยค่ะ

3.เมื่อได้ไฟล์ที่โหลดมาแล้วทำการแตกซิปไฟล์ แล้วนำไฟล์ eot, woff, ttf และ svg ใส่ในโฟล์เดอร์ในเว็บที่เราต้องการ จากนั้น coppy โค้ดที่ไฟล์ stylesheet.css ที่เราได้มาไปใส่ในไฟล์ style.css ของเว็บเราแล้วเปลี่ยน path ให้ตรงตามที่เรานำฟอนต์ไปวางไว้ 

@font-face {
    font-family: 'max_pinjohnv2regular';
    src: url('max_pinjohn_v2-webfont.eot');
    src: url('max_pinjohn_v2-webfont.eot?#iefix') format('embedded-opentype'),
         url('max_pinjohn_v2-webfont.woff2') format('woff2'),
         url('max_pinjohn_v2-webfont.woff') format('woff'),
         url('max_pinjohn_v2-webfont.ttf') format('truetype'),
         url('max_pinjohn_v2-webfont.svg#max_pinjohnv2regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

4.ส่วนในโค้ด css เราก็เรียกชื่อฟอนต์ได้เลย ดังตัวอย่าง

h1{font-family:'max_pinjohnv2regular';}

เพียงแค่นี้เว็บของคุณก็จะสวยขึ้น ไม่ยากเลยใช่ไหมละค่ะ ลองทำกันดูนะ

Sponsered link

Comments