Get Adobe Flash player
webnetwork

ข่าวสารจาก Administrator

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

free-thai-fonts-google-cadsondeemak

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

 
 

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

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

ฟ้อนต์ไทยฟรีใน GOOGLE FONTS

ฟ้อนต์ภาษาไทยที่ใช้งานได้ฟรีใน Google Fonts ได้แก่ Itim, Chonburi, Kanithttp://www.designil.com/wp-content/uploads/2015/12/google-fonts-api-1024x699.png 1024w, http://www.designil.com/wp-content/uploads/2015/12/google-fonts-api-335x229.png 335w, http://www.designil.com/wp-content/uploads/2015/12/google-fonts-api-1050x716.png 1050w" sizes="(max-width: 1680px) 100vw, 1680px" style="box-sizing: border-box; font-style: italic; max-width: 100%; width: 690.656px; vertical-align: bottom; height: auto; visibility: visible;">

ฟ้อนต์ภาษาไทยที่ใช้งานได้ฟรีใน Google Fonts ได้แก่ Itim, Chonburi, Kanit

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

  1. ฟ้อนต์ Itim (ไอติม) – ฟ้อนต์กลม ๆ น่ารัก ๆ เหมาะกับงานออกแบบสำหรับเด็ก
  2. ฟ้อนต์ Chonburi (ชลบุรี) – ฟ้อนต์โค้งเยอะ ๆ ดู Elegant เหมาะกับงานออกแบบสไตล์หรูหรา
  3. ฟ้อนต์ Kanit (คณิต) – ฟ้อนต์ไม่มีหัวหน้าตา Modern เหมาะกับงานออกแบบสมัยใหม่ (อารมณ์ Supermarket, RSU, Thai Sans ที่เราชอบใช้กันเลย)

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

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

  1. เข้าเว็บไซต์ Google Fonts
  2. ในเมนูด้านซ้าย เลือก Script > Thai
    http://www.designil.com/wp-content/uploads/2015/12/google-fonts-script-thai-how-to-335x314.png 335w, http://www.designil.com/wp-content/uploads/2015/12/google-fonts-script-thai-how-to.png 605w" sizes="(max-width: 605px) 100vw, 605px" style="box-sizing: border-box; font-style: italic; max-width: 100%; width: 615px; vertical-align: bottom; height: auto; visibility: visible;">

    เลือกดูเฉพาะฟ้อนต์ภาษาไทยได้เลย

  3. เท่านี้ก็จะเจอกับฟ้อนต์ไทย 3 แบบสวย ๆ จาก Cadson Demak
  4. ถ้าชอบฟ้อนต์ไหน ก็กดปุ่มสีฟ้า Add to Collection ด้านขวา จะมีบาร์ข้างล่างโผล่ขึ้นมาแสดงว่าเราเลือกฟ้อนต์ไหนไปบ้างแล้ว จะเลือกหลาย ๆ ฟ้อนต์ก็ได้
  5. เลือกเสร็จกดปุ่ม Use ด้านขวาในบาร์ข้างล่าง จะมาที่หน้าสำหรับ Copy Code ไปใช้ในเว็บไซต์เราได้เลยครับ
    ความดีงาม คือ เค้ามีฟ้อนต์ให้เลือกใช้หลาย Weight มาก ทำงานสบายhttp://www.designil.com/wp-content/uploads/2015/12/google-fonts-thai-1024x565.jpg 1024w, http://www.designil.com/wp-content/uploads/2015/12/google-fonts-thai-335x185.jpg 335w, http://www.designil.com/wp-content/uploads/2015/12/google-fonts-thai-1050x580.jpg 1050w, http://www.designil.com/wp-content/uploads/2015/12/google-fonts-thai.jpg 1422w" sizes="(max-width: 1422px) 100vw, 1422px" style="box-sizing: border-box; font-style: italic; max-width: 100%; width: 647.656px; vertical-align: bottom; height: auto; visibility: visible;">

    ความดีงาม คือ เค้ามีฟ้อนต์ให้เลือกใช้หลาย Weight มาก เอาไปทำงานสบาย

  6. เลื่อนลงมาถึงข้อ 3 และเอาโค้ดไปใส่ใน <head> ของเว็บไซต์เรา เพื่อดึงฟ้อนต์นั้นมาใช้งานบนเว็บ
    ก็อปปี้โค้ดไปใช้ก็รันได้เลย ไม่ต้อง Download ฟ้อนต์ครับhttp://www.designil.com/wp-content/uploads/2015/12/free-google-font-thai-code-1024x397.jpg 1024w, http://www.designil.com/wp-content/uploads/2015/12/free-google-font-thai-code-335x130.jpg 335w, http://www.designil.com/wp-content/uploads/2015/12/free-google-font-thai-code-1050x407.jpg 1050w" sizes="(max-width: 2202px) 100vw, 2202px" style="box-sizing: border-box; font-style: italic; max-width: 100%; width: 647.656px; vertical-align: bottom; height: auto; visibility: visible;">

    ก็อปปี้โค้ดไปใช้ก็รันได้เลย ไม่ต้อง Download ฟ้อนต์ครับ

  7. จากนั้นเอาโค้ดในข้อ 4 ไปใส่ใน CSS ของเราตาม Selector ที่ต้องการใช้ฟ้อนต์นั้น ตัวอย่างเช่น
    1. /* ใช้ทั้งเว็บไซต์ */
    2. body {
    3. font-family:'Kanit', sans-serif;
    4. }
    5. /* ใช้เฉพาะหัวข้อ */
    6. h1, h2, h3, h4, h5, h6 {
    7. font-family:'Kanit', sans-serif;
    8. }
  8. เสร็จเรียบร้อย เท่านี้ฟ้อนต์สวย ๆ ที่เราเลือกใช้ก็จะมาแสดงผลบนเว็บไซต์ของเราแล้วครับ :)

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

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

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

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

ฟ้อนต์สวย ๆ จากเพจ คัดสรร ดีมากhttp://www.designil.com/wp-content/uploads/2015/12/cadson-deemak-google-fonts-335x210.jpg 335w, http://www.designil.com/wp-content/uploads/2015/12/cadson-deemak-google-fonts.jpg 845w" sizes="(max-width: 845px) 100vw, 845px" style="box-sizing: border-box; font-style: italic; max-width: 100%; width: 690.656px; vertical-align: bottom; height: auto; visibility: visible;">

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

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

 สำนักงานเขตพื้นที่การศึกษาประถมศึกษาพะเยา เขต 2 (สพป.พย.2) สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน (สพฐ.)
ถนนจุน - ปง ตำบลจุน อำเภอจุน จังหวัดพะเยา 56150 โทรศัพท์ 0-5407-9869 0-5407-868  0-5407-9867 Hotline 0-5407-9866
e-Mail : [email protected][email protected]
Webmaster :จ.ส.ท.สุพจน์ ชัยชนะ :: ITEC Phayao2  e-Mail :[email protected] [email protected]


 

 

 

 


Click here
Click here

crayfishstudios.com
Click here