ดาวน์โหลด เว็บฟ้อนต์ ภาษาไทย เว็บฟอนต์สวยๆ webfont

รักชอบแชร์เลย!! Share on FacebookShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedIn

เมือหลายวันก่อน ทำเว็บให้ลูกค้ารายหนึ่ง และเขาต้องการฟ้อนต์ให้แตกต่างจากทั่วไป เลยต้องไปหาวิธีการมาใช้ซะหน่อย การใช้งานเว็บฟ้อนต์นั้น จริงๆแล้วไม่ได้ยุ่งยากมากนักครับ และสามารถเรียกใช้ ด้วย CSS3 ได้เลย ที่สามารถใช้งานใน IE ได้แม้กระทั่งใน IE6 และบราวเซอร์ รุ่นใหม่ ทุกค่ายครับ

โดยขั้นแรกก็เราต้องนำฟอนต์ที่เราต้องการ นำไปแปลงให้เป็นชุดของฟอนต์สำหรับใช้ในเว็บเสียก่อน โดยเครื่องมือที่ใช้ง่ายที่สุดได้แก่ @font-face Kit Generator โดย Font Squirrel ซึ่งวิธีการตั้งค่าสำหรับฟอนต์ไทยจะต้องใช้โหมด EXPERT ส่วนที่สำคัญคือตั้ง Subsetting เป็น No Subsetting เพื่อให้ใช้ภาษาไทยได้ ดังภาพข้างล่างครับ แต่ผมได้เตรียมสำเร็จไว้ให้ท่านโหลดไปใช้ 17 ฟ้อนต์ครับ เตรียมไว้ในรูปแบบเว็บฟ้อนต์ และ css3 สามารถนำไปใช้ได้ทันทีครับ

 

webfont_00

จากนั้นคลิกปุ่ม Download your kit เมื่อแตกไฟล์ จะได้ไฟล์ ดังรูปข้างล่างนี้ครับ เมื่อแตกไฟล์แล้ว จะได้ประมาณนี้ครับ

webfont_05

เมื่อแตกไฟล์แล้ว จะได้ประมาณนี้ครับ

webfont_06

วิธีการใส่ ก็นำโค๊ดใส่ตรงสไตลชีสเราได้เลย เช่น

 

@font-face {

    font-family: 'Book_Akhanake';

    font-weight: normal;

    font-style:  normal;

    src: url('../fonts/book_akhanake-webfont/book_akhanake-webfont.eot'); /* IE9 Compat Modes */

    src: local('Book_Akhanake'),

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.woff') format('woff'), /* Modern browsers */

         url('../fonts/book_akhanake-webfont/book_akhanake-webfont.ttf') format('truetype'); /* Safari, Android, iOS */

}

 

ตัวอย่างฟ้อนต์ภาษาไทยที่ผมได้รวบรวมไว้ครับ สามารถดาวน์โหลดไปใช้ได้เลยwebfont_01

webfont_02

webfont_03

Download “font ภาษาไทย” ThaiWebFonts.zip – Downloaded 3855 times – 8 MB

ดาวน์โหลดเว็บฟ้อนภาษาไทยทั้งหมด

 

หากต้องการฟ้อนต์เพิ่มเติม ไปหาได้จากที่นี่ครับ http://www.f0nt.com/

รักชอบแชร์เลย!! Share on FacebookShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedIn