วิธีใส่ฟอนต์บนเว็บไซต์รองรับ IE8+ และอื่นๆ

Font สวยๆ ก็จำเป็นมากสำหรับงานออกแบบเว็บไซต์ครับ ซึ่ง Font มาตรฐานของเว็บไซต์เองก็มีให้เลือกไม่มากนัก ครั้นจะใช้ Google Font ที่มีความงามขึ้นมาหน่อย แต่ก็ดันไม่มี Font ภาษาไททยอีก และที่สำคัญคือไฟล์ Font ส่วนใหญ่จะทำมาเป็นไฟล์แบบสมัยใหม่ ซึ่งก็ไม่ค่อยจะรองรับบน IE หรือ Browser เก่าๆ อื่นๆ ทำใหเราต้องทำการแปลงไฟล์ให้เป็นไฟล์ที่รองรับสำหรับแต่ละ Web Browser กันก่อน


ขั้นตอนต่อไปนี้จะเป็นวิธีการใส่ Font ภาษาไทยให้กับเว็บไซต์ครับ ซึ่งคุณสามารถทำตามได้เลย

วิธีใส่ฟอนต์ให้เว็บไซต์รองรับ IE8+ และ Browser อื่นๆ

1. ก่อนอื่นเราต้องมี Font ภาษาไทยสวยๆ ก่อนนะครับ อันนี้แล้วแต่เลยว่าจะ Download มาจากที่ไหน แต่แนะนำว่าให้เป็น ไฟล์ .ttf (true type font)
   *ระวังการหา Font ด้วยนะครับ หลายๆ Font มีลิขสิทธิ์ห้ามเผยแพร่นอกจากจะได้รับอนุญาตจากเจ้าของ Font ก่อน
2. แปลงไฟล์ font .tff ของเราให้เป็น ไฟล์ .woff .woff2 .svg และ .eot ซึ่งคุณสามารถแปลงได้โดยเว็บไซต์นี้ http://www.fontsquirrel.com/tools/webfont-generator
   หรือจะใช้ Web อื่นก็ได้นะครับ ขั้นตอนการแปลงนี้ แล้วแต่เลยครับว่าจะใช้วิธีไหน ลอง Search "Convert Font" ใน Google ดูก็ได้ครับ มีหลายเว็บไซต์ให้เลือกใช้
3. เมื่อเราได้ไฟล์ที่ต้องการทั้งหมดมาแล้ว ใน CSS ให้เราเพิ่มโค้ดส่วนนี้ลงไป
   @font-face {
       font-family: 'ชื่อ Font ของคุณ';
       src: url('ชื่อไฟล์ Font ของคุณ.eot');
       src: url('ชื่อไฟล์ Font ของคุณ.eot?#iefix') format('embedded-opentype'),
       url('ชื่อไฟล์ Font ของคุณ.woff2') format('woff2'),
       url('ชื่อไฟล์ Font ของคุณ.woff') format('woff'),
       url('ชื่อไฟล์ Font ของคุณ.ttf') format('truetype'),
       url('ชื่อไฟล์ Font ของคุณ.svg#ชื่อ Font ของคุณ') format('svg');
   }
   ตรง ชื่อไฟล์ Font ของคุณ ให้เปลี่ยนเป็นชื่อไฟล์ลงไปนะครับ สมมติว่า Download Font มาชื่อ myfont.ttf ก็ให้ใส่ "myfont" ลงไปแทน "ชื่อไฟล์ Font ของคุณ" นะครับ แนะนำให้ใส่ไว้บรรทัดแรกๆ เลยครับ
4. ส่วนเวลาจะเรียกใช้ Font ก็ให้ใช้ Tag [font-family: ชื่อ Font ของคุณ;]
   ตัวอย่าง:
   h1, h2, h3 { font-family : myfont; }

ขอย้ำเรื่อง ลิขสิทธิ์ Font อีกทีนะครับ ก่อนจะ Download Font มา อย่าลืมอ่าน Terms of use หรือ License Font ก่อนนะครับ ว่าทางเจ้าของ Font เค้าอนุญาตให้เรานำไปเผยแพร่ หรือใช้บนสื่ออื่นหรือไม่ บาง Website บอกว่า Free Font สามารถ Download ได้ทันที แบบนี้ก็อย่าไว้วางใจนะครับ อ่านดูเงื่อนไขการใช้งาน Font ให้ดีๆ ก่อน

และทั้งหมดนี้ก็คือขั้นตอนของวิธีการใส่ Font บนเว็บไซต์ของเราให้รองรับทั้งบน IE8+ และ Browser ดังๆ รุ่นอื่นๆ เช่น Firefox, Chrome และ Safari ซึ่งทางเราหวังเป็นอย่างยิ่งว่าจะประโยชน์สำหรับทุกคน

ส่วนในครั้งหน้าผมจะมีทิปส์ หรือเทคนิคอะไรมาแชร์กันอีก อย่าลืมติดตามชมกันด้วยนะครับ