free-thai-fonts-google-cadsondeemak

ฟ้อนต์ไทยสวย ๆ ใน Google Fonts ใช้ฟรี 100% !! พร้อมวิธีการใช้งานทีละขั้นตอน

อัพเดท [2016]: ตอนนี้ Google Fonts เปลี่ยน Interface ใหม่หมดแล้วครับ สวยงามมาก แอดมินอัพเดทวิธีใช้ในบทความนี้เป็นตาม Interface ใหม่เรียบร้อยแล้ว

Google Fonts เป็นบริการโฮสต์ฟ้อนต์ฟรีของ Google ที่เราสามารถเลือกฟ้อนต์สวย ๆ ของเค้ามาใช้ในเว็บไซต์ได้เลย ไม่ต้อง Download ฟ้อนต์มา Convert และ เขียน CSS3 @font-face ให้เสียเวลา แอดมินรู้จัก Google Font ครั้งแรกตั้งแต่ตอนที่มันยังเป็น Google Font API และเคยเขียนแนะนำวิธีใช้ไว้เมื่อ 5 ปีที่แล้วครับ

ข้อดีสุด ๆ ที่ทำให้ผมชอบ Google Fonts คือ ฟ้อนต์ที่อยู่ในนี้ใช้ฟรีบนเว็บไซต์ ! (แต่งานพิมพ์ต้องซื้อลิขสิทธิ์สำหรับพิมพ์อีกทีนะคร้าบ) โดยปกติแล้วฟ้อนต์สวย ๆ ที่ถึงแม้เราซื้อมาใช้ในงานพิมพ์แล้ว ถ้าจะใช้บนเว็บไซต์ต่ออีกเราก็ต้องซื้อ Webfont License (ลิขสิทธิ์การใช้บนเว็บไซต์) อีกรอบนึง นอกจากนั้นไม่ได้มีฟ้อนต์ไทยแค่ตัวเดียว แต่มีถึง 12 ฟ้อนต์ !

ฟ้อนต์ไทยฟรีใน Google Fonts

ฟ้อนต์สวย ๆ เหล่านี้เป็นผลงานของ คัดสรร ดีมาก บริษัททำฟ้อนต์ชื่อดังของเมืองไทยที่เป็นผู้ทำฟ้อนต์ Sukhumvit ฟ้อนต์ไทยฟรีใน OS X นั่นเองครับ ซึ่งเค้าก็ใจดีทำฟ้อนต์ใน Google Fonts มาให้ถึง 12 แบบ 12 สไตล์

  1. ฟ้อนต์ Itim (ไอติม) – ฟ้อนต์กลม ๆ น่ารัก ๆ เหมาะกับงานออกแบบสำหรับเด็ก
  2. ฟ้อนต์ Chonburi (ชลบุรี) – ฟ้อนต์โค้งเยอะ ๆ ดู Elegant เหมาะกับงานออกแบบสไตล์หรูหรา
  3. ฟ้อนต์ Kanit (คณิต) – ฟ้อนต์ไม่มีหัว หน้าตา Modern เหมาะกับงานออกแบบสมัยใหม่ (อารมณ์ Supermarket, RSU, Thai Sans ที่เราชอบใช้กันเลย)
  4. ฟ้อนต์ Prompt (พร้อม) – ฟ้อนต์ไทยหน้าตาดี ที่ผมคิดว่าใกล้เคียง Sukhumvit มากที่สุดในเซ็ต มีความสมัยใหม่ คลีน Modern กว่า Kanit
  5. ฟ้อนต์ Trirong (ไตรรงค์) – ฟ้อนต์ไทยมีหัว บาง ผอม เหมาะกับงานสไตล์ไทย ๆ หนังสือพิมพ์ ที่อยากให้อ่านง่าย
  6. ฟ้อนต์ Taviraj (ทวิราช) – ฟ้อนต์ไทยมีหัว ตัวนี้อ้วนกว่า Trirong ซึ่งทำให้อ่านง่ายกว่าเวลาขนาดตัวหนังสือเล็ก
  7. ฟ้อนต์ Mitr (มิตร) – ฟ้อนต์ไทยไม่มีหัว หน้าตา Modern ดี มีความโค้งมนเล็กน้อยเพิ่มขึ้นมา
  8. ฟ้อนต์ Athiti (อธิติ) – ฟ้อนต์ไม่มีหัว แบบบาง มีเชิงเล็ก ๆ ที่ทำให้ดูมีความเป็นไทย
  9. ฟ้อนต์ Pridi (ปรีดี) – ฟ้อนต์ไทยมีหัว ที่มีความ Modern ไม่ไทยจ๋า
  10. ฟ้อนต์ Maitree (ไมตรี) – ฟ้อนต์ไทยมีหัว มีเชิงหนักมาก ให้อารมณ์ตัวหนังสือสมัยก่อน
  11. ฟ้อนต์ Pattaya (พัทยา) – ฟ้อนต์ไทยไม่มีหัว เอามาจับคู่กับฟ้อนต์ Lobster ฟ้อนต์อังกฤษชื่อดังใน Google Fonts ได้เลย
  12. ฟ้อนต์ Sriracha (ศรีราชา) – ฟ้อนต์ไม่มีหัว ตัวเอียง เหมือนลายมือ

วิธีการใส่ฟ้อนต์ฟรี Google Fonts ในเว็บไซต์

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

  1. เข้าเว็บไซต์ Google Fonts
  2. ในเมนูด้านซ้าย เลือก Languages > Thai
  3. เท่านี้ก็จะเจอกับฟ้อนต์ไทย 12 แบบสวย ๆ จาก Cadson Demak
  4. ถ้าชอบฟ้อนต์ไหน ก็กดปุ่ม + สีแดงที่มุมบนขวาของแต่ละฟ้อนตื จะมีบาร์ข้างล่างโผล่ขึ้นมาแสดงว่าเราเลือกไปกี่ฟ้อนต์แล้ว จะเลือกหลาย ๆ ฟ้อนต์ก็ได้
  5. เลือกเสร็จ คลิกที่บาร์สีดำที่เขียนว่า “X families Selected” ด้านล่าง หน้าต่างแนะนำวิธีการใช้งานฟ้อนต์ที่เราเลือกจะปรากฏขึ้นมา สามารถก็อปปี้โค้ดไปใช้ใน HTML / CSS ของเราได้เลยครับ
  6. สำหรับโค้ด HTML นำไปใส่ในระหว่าง <head> … </head> ได้เลย หรือถ้าอยาก @import ใส่ CSS แทน ก็เลือกแท็บ @IMPORT ครับ
  7. สำหรับโค้ด CSS ให้นำไปใส่ใน CSS Selector ที่ต้องการแสดงฟ้อนต์ตัวนั้น ตัวอย่างเช่น
    /* ใช้ทั้งเว็บไซต์ */
    body {
      font-family: 'Chonburi', sans-serif;
    }
    
    /* ใช้เฉพาะหัวข้อ */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Athiti', sans-serif;
    }
  8. เสร็จเรียบร้อย เท่านี้ฟ้อนต์สวย ๆ ที่เราเลือกใช้ก็จะมาแสดงผลบนเว็บไซต์ของเราแล้วครับ 🙂

ตัวอย่างการใช้ฟ้อนต์ไทยฟรีจาก Google Fonts

แอดมินลองทำตัวอย่างการใช้งานฟ้อนต์ Kanit มาให้ดูกันครับ สวยงามน่าใช้มาก

See the Pen Google Fonts in Thai by designil (@designil) on CodePen.1723

ในอนาคตมีฟ้อนต์ฟรีภาษาไทยอื่น ๆ ตามมาอีก

ตอนนี้ฟ้อนต์ไทยสวย ๆ ทั้งเซ็ต 12 ตัวของ Cadson Demak สามารถเลือกใช้ใน Google Fonts ได้ทั้งหมดแล้วครับ

สำหรับเรื่องลิขสิทธิ์ฟ้อนต์ต่าง ๆ ใน Google Fonts ของคัดสรรดีมาก คุณ Tom Whaleunderthesea ได้ติดต่อทางคัดสรรดีมากไปสอบถาม และได้รับคำตอบว่า

ใช้ได้ฟรี ทั้งบน website และสื่อสิ่งพิมพ์ ในเชิงธุรกิจได้ครับ เพราะเป็น font แบบ OFL แต่ถ้านำไปใช้เชิงธุรกิจ อาจให้ credit หรือ donate ให้กับทาง คัดสรรดีมาก เพื่อช่วยกันพัฒนา สังคมคนทำ font ครับ

เอาไปใช้กันได้อย่างสบายใจ ไม่ต้องคิดมากเลยฮะ 😀

ฟ้อนต์ไทยสวย ๆ ดี ๆ ไม่ได้มีแค่ 3 ตัวแน่นอนครับ บน Facebook Page ของ คัดสรร ดีมาก มีการลงรูปฟ้อนต์สวย ๆ ที่จะตามมาใน Google Fonts เร็ว ๆ นี้ครับ

เตือนเรื่องลิขสิทธิ์เล็กน้อย คือ ฟ้อนต์พวกนี้จะใช้กับงานเว็บไซต์ได้เท่านั้นครับ ถ้านำไปใช้กับงานพิมพ์ต้องติดต่อทาง Cadson Demak เพื่อซื้อลิขสิทธิ์การพิมพ์ โดยจะเริ่มต้นที่ Weight ละประมาณ 11,000 บาทครับ (อันนี้สอบถามทางเพจ Cadson Demak มา)

ฟ้อนต์สวย ๆ จากเพจ คัดสรร ดีมาก

ฟ้อนต์สวย ๆ จากเพจ คัดสรร ดีมาก

ต้องขอขอบพระคุณทีมงานของคัดสรร ดีมาก ที่ทำให้เราได้ใช้ฟ้อนต์สวย ๆ กันมา ณ ที่นี้ครับ มันเป็นก้าวที่ยิ่งใหญ่มากในวงการคนทำเว็บไซต์ แอดมินเชื่อว่าต่อไปนี้เราจะได้เห็นเว็บภาษาไทยสวยงามขึ้นอีกเยอะ ไม่มีใครมาบ่นว่า “เว็บไทยไม่สวย เพราะไม่มีฟ้อนต์สวย ๆ ใช้” อีกต่อไปครับ




There are no comments

Add yours

ไม่อยากพลาดบทความดี ๆ ด้าน Web Design, HTML5, CSS3 ใช่มั้ย ?

มาร่วมเป็นส่วนหนึ่งของสมาชิกกว่า 2,500+ คนของ Designil และรับบทความใหม่ ๆ ส่งตรงถึงอีเมลคุณ! (ไม่มีแสปม 100%)

สมัครสมาชิกเรียบร้อยแล้ว! กรุณาเช็คอีเมลของคุณเพื่อกดยืนยันการสมัครสมาชิก