Google Fonts เป็นบริการโฮสต์ฟอนต์ฟรีของ Google ที่เราสามารถเลือกฟอนต์มาใช้ในเว็บไซต์ได้เลย ข้อดีสุด ๆ ของ Google Fonts คือ ใช้ฟรีทั้งบน งา...
Google Fonts เป็นบริการโฮสต์ฟอนต์ฟรีของ Google ที่เราสามารถเลือกฟอนต์มาใช้ในเว็บไซต์ได้เลย ข้อดีสุด ๆ ของ Google Fonts คือ ใช้ฟรีทั้งบน งานพิมพ์ และ เว็บไซต์ โดยปกติแล้วฟอนต์ที่เราซื้อมา ถึงแม้ซื้อมาใช้ในงานพิมพ์ แต่ถ้าจะใช้บนเว็บไซต์ต่ออีกเราต้องซื้อ Webfont License (ลิขสิทธิ์การใช้บนเว็บไซต์) อีกรอบนึง นอกจากนั้นไม่ได้มีฟอนต์ไทยแค่ตัวเดียว แต่มีถึง 3 ฟอนต์ด้วยกัน ปัจจุบันมีให้เลือก 12 ฟอนต์แล้วครับ
ฟอนต์สวย ๆ เหล่านี้เป็นผลงานของ คัดสรร ดีมาก บริษัททำฟอนต์ชื่อดังของเมืองไทยที่เป็นผู้ทำฟอนต์ Sukhumvit ฟอนต์ไทยฟรีใน OS X นั่นเองครับ ซึ่งเค้าก็ใจดีทำฟอนต์ใน Google Fonts มาให้ถึง3 แบบ 3 สไตล์ 12 ฟอนต์ ได้แก่
 |
| หน้าเว็บ Google Fonts แบบเดิม |
 |
| หน้าเว็บ Google Fonts แบบใหม่ |
ฟอนต์สวย ๆ เหล่านี้เป็นผลงานของ คัดสรร ดีมาก บริษัททำฟอนต์ชื่อดังของเมืองไทยที่เป็นผู้ทำฟอนต์ Sukhumvit ฟอนต์ไทยฟรีใน OS X นั่นเองครับ ซึ่งเค้าก็ใจดีทำฟอนต์ใน Google Fonts มาให้ถึง
- ฟอนต์ Itim (ไอติม) – ฟอนต์กลม ๆ น่ารัก ๆ เหมาะกับงานออกแบบสำหรับเด็ก
- ฟอนต์ Chonburi (ชลบุรี) – ฟอนต์โค้งเยอะ ๆ ดู Elegant เหมาะกับงานออกแบบสไตล์หรูหรา
- ฟอนต์ Kanit (คณิต) – ฟอนต์ไม่มีหัวหน้าตา Modern เหมาะกับงานออกแบบสมัยใหม่ (อารมณ์ Supermarket, RSU, Thai Sans ที่เราชอบใช้กันเลย)
- ฟอนต์ Sriracha (ศรีราชา)
- ฟอนต์ Lobsterthai (ล็อบสเตอร์ไทย)
- ฟอนต์ Maitree (ไมตรี)
- ฟอนต์ Pridi (ปรีดี)
- ฟอนต์ Athiti (อทิติ)
- ฟอนต์ Mitr (มิตร)
- ฟอนต์ Taviraj (ทวิราช)
- ฟอนต์ Trirong (ไตรรงค์)
- ฟอนต์ Prompt (พร้อม)
วิธีการใส่ฟอนต์ฟรี Google Fonts ในเว็บไซต์
การใช้ฟอนต์สวย ๆ เหล่านี้ในเว็บนี่ง่ายมาก ๆ ครับ ทำตามขั้นตอนนี้แค่ 3 นาทีใช้ฟอนต์ในเว็บเราได้เลย ไม่มีค่าใช้จ่าย
Step 1 เข้าเว็บไซต์ Google Fonts
Step 2 ในเมนูด้านซ้าย เลือก Script > Thai
เท่านี้ก็จะเจอกับฟอนต์ไทย 12 แบบสวย ๆ จาก Cadson Demak ถ้าชอบฟอนต์ไหน ก็กดปุ่มสีฟ้า Add to Collection ด้านขวา จะมีบาร์ข้างล่างโผล่ขึ้นมาแสดงว่าเราเลือกฟ้อนต์ไหนไปบ้างแล้ว จะเลือกหลาย ๆ ฟอนต์ก็ได้
Step 3 เลือกเสร็จกดปุ่ม Use ด้านขวาในบาร์ข้างล่าง จะมาที่หน้าสำหรับ Copy Code ไปใช้ในเว็บไซต์เราได้เลยครับ
Step 4 เลื่อนลงมาถึงข้อ 3 และเอาโค้ดไปใส่ใน <head> ของเว็บไซต์เรา เพื่อดึงฟอนต์นั้นมาใช้งานบนเว็บ
ถ้าเอาไปใช้ใน Blogger ต้องแปลง code ที่ได้นิดหน่อยครับ คลิกที่นี่ได้เลยครับ
Step 5 จากนั้นเอาโค้ดในข้อ 4 ไปใส่ใน CSS ของเราตาม Selector ที่ต้องการใช้ฟอนต์นั้น ตัวอย่างเช่น
/* ใช้ทั้งเว็บไซต์ */
body {
font-family: 'Kanit', sans-serif;
}
/* ใช้เฉพาะหัวข้อ */
h1, h2, h3, h4, h5, h6 {
font-family: 'Kanit', sans-serif;
}
COMMENTS