การทำเว็บเป็นเรื่องปกติที่เราจะใช้ Font ที่ไม่ใช่ของดั้งเดิมที่มีในเครื่องหล่ะ แล้วก็ต้องหามาเติมแต่ง ทุกวันนั้นนี้ Font ไทย ที่เอามาใช้งานได้กับเว็บก็เยอะมากแล้ว เว็บดังๆ ก็มีการใช้กันอย่างแพร่หลาย Font ที่หลายๆ ท่าน อาจจะเคยได้ยินไม่ว่าจะเป็น Supermaket  เป็นต้น

แต่การทำเว็บไซต์ถ้าเราต้องการใช้ Font พวกนี้เราจำเป็นต้องเพิ่มเข้าไปเอง ต้อง Generate เข้าไปใช้เอง เรียกใช้เอง ค่อนข้างจะต้องทำหลายขั้นตอนอยู่ แต่ตอนนี้ จริงๆ มีมานานซักพักแล้วนะครับ Google มีบริการให้เรียกใช้งาน Web Font และที่สำคัญมีของสำหรับ ภาษาไทยด้วย มีด้วยกันเยอะเลยถึง 12 Fonts

Font ชุดนี้ต้องขอขอบคุณทาง คัดสรร ดีมาก ด้วยนะครับที่จัดทำขึ้นมาให้ใช้ได้ฟรี เรามาดู Font ทั้ง 12 ชุดนี้กันเลยดีหว่า Google Fonts

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

 

วิธีการเลือกใช้งาน 

เข้าที่ไป URL ลิงค์นี้ Google Fonts จากภาพด้านบนให้สังเกตุด้านขวา หลังจากนั้นให้เลือกตรงช่อง Language ให้เลือกเป็น Thai ก็จะมี Fonts ทั้งหมดขึ้นมาแสดงให้เห็น เราสามารถที่จะทดลองแก้ไขข้อความได้เลย เพื่อต้องการทดสอบ สระต่าง พยัญชนะต่างๆ ได้เลย

 

วิธีการใช้งานสำหรับเว็บไซต์ทั่วไป

จากภาพจะเห็นปุ่มบวกด้านบน ให้คลิ๊กเพื่อเลือก หลังจากนั้นจะมีแถบเด้งขึ้นมาที่บริเวณด้านล่าง ตามภาพนี้ จากตัวอย่างผมเลือก Athiti ครับ

google fonts
google fonts

ก็จะพบกับตัวอย่างการใช้งาน มีตัวอย่างบอกด้วยว่า ฟ้อนท์ ที่เราเลือกเพิ่มไปว่าช้าไหม ก็ให้ Copy Link มาใส่ และส่วนของการใช้งาน CSS ก็ใช้ “font-family : ‘Athiti’, sans-serif” ฟ้อนก็จะใช้งานได้เลย ส่วนของ Copy Embed Link มาแปะนั้น ถ้าเป็น html ธรรมดา เราก็สามารถจะวางได้เลย

 

วิธีการใช้งานสำหรับเว็บไซต์ WordPress

  1. ถ้าเราต้องการวางเองสามารถวาง Code ผ่าน Appearance -> Editor  ก็ได้ ผ่านไฟล์ header.php
  2. ใช้ Plugin ที่สามารถเพิ่มส่วนของ Header ก็ได้
  3. ใช้ Plugin Font thai ก็ได้  Seed Fonts มีมากกว่าของ Google ด้วย เป็นต้น

หรือถ้าเราไม่อยาก Embed เราสามารถเลือกเป็น @import ลงในไฟล์ css ก็ได้นะครับ

 

Google Fonts
Google Fonts

ลองทดสอบใช้งานเพิ่มเติมนะครับ หากมี Fonts ใหม่ๆ เพิ่มเข้ามา ผมจะเอามาเขียนต่อให้นะครับ

 
Loading...