PhatthanichaK
Dec 4, 2018 · 3 min read

ฟ้อนต์เป็นส่วนหนึ่งที่สำคัญ ของการสื่อสารไม่ว่าจะอยู่บนสื่ออะไรก็ตาม ปฏิเสธไม่ได้ว่าการเลือกใช้ฟ้อนต์เป็นอีกหนึ่งองค์ประกอบที่จะทำให้รูปแบบงาน สินค้าของเราออกมาดูดี สวยงาม น่าดึงดูดต่อผู้ใช้งานมากยิ่งขึ้น

1. Google Fonts

https://fonts.google.com/

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

นอกจากนี้ทาง Google ก็ให้เราสามารถที่จะนำไปใช้งานอื่นๆ เช่น ออกแบบโปสเตอร์ แผ่นพับ นามบัตร สิ่งพิมพ์ ได้อีกด้วย ทั้งในแบบส่วนตัวและเชิงพาณิชย์ *แต่ห้ามนำฟ้อนต​์ไปดัดแปลงหรือนำไปจำหน่ายต่อเท่านั้น!!

ถึงแม้ Google Fonts จะเป็นฟ้อนต์จากทาง Google ก็จริง แต่ทาง Google นั้นไม่ได้ออกแบบเอง แต่ได้ไปจ้างหรือไปเป็น Partner กับบริษัทผลิตฟ้อนต์ในแต่ละประเทศ ถ้าในประเทศไทยก็คือ บริษัท คัดสรร ดีมาก ซึ่งนับว่าเป็นบริษัทฯ ผลิตฟ้อนต์แถวหน้าของประเทศไทย

Google เค้าใจดีแจกฟ้อนท์ไทยฟรีทั้งหมด มาให้ถึง 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 ลงไปใช้ในเครื่อง

  1. เข้าไปที่ https://fonts.google.com/
  2. เมนูด้านซ้าย filter ตรง language เป็นภาษา Thai

3. เลือกฟอนต์ที่เราต้องการ Download โดยการกด (+) ท้ายฟอนต์นั้นๆ

4. กดปุ่ม + SELECT THIS FONT เพื่อดาวน์โหลด แล้วจะมี Tab Bar ขึ้นมาด้านล่าง มุมขวาตามภาพ คลิกที่ Tab Bar

5. คลิกที่ ไอคอน download (ลูกศรสีแดงด้านขวาบน) เรียบร้อย สามารถนำไปติดตั้งในเครื่อง เพื่อใช้พิมพ์หรือดีไซน์งานได้เลยค่ะ

แต่ถ้าอยากจะนำ Google Fonts มาใช้งานในเว็บไซต์ เราไม่ต้อง Download Font ลงมาที่เครือ่ง สามารถคัดลอกโค้ดที่ระบบสร้างขึ้นให้ของฟอนต์นั้นๆ นำไปใส่ในเว็บไซต์ได้เลยค่ะ

วิธีการนำฟ้อนต์ไปใช้ในเว็บไซต์

  1. ทำการคัดลอก Code ตรงไฮไลท์สีเหลือง

2. เมื่อคัดลอก Code มาแล้ว เราต้องมาเพิ่ม Code เพื่อกำหนดส่วนต่างๆ บนเว็บไซต์ หากต้องการกำหนดให้ทั้งเว็บไซต์แสดงฟอนต์ตัวนี้ให้ใส่ body ตามด้วย code ของฟอนต์

ตัวอย่างการนำมาใส่ในโครงสร้าง HTML ดังนี้

ไฟล์ style.css

นอกจากนั้นยังสามารถเลือก Customize ขนาดและ น้ำหนักแบบต่างๆ ของ Font ได้นะคะ

แค่นี้ก็สามารถใช้ฟ้อนท์ไทย ของ Google ได้ในเว็บไซต์ของเราได้แล้วค่ะ

2. Noto Font

https://www.google.com/get/noto/

ฟอนต์ตระกูล Noto เป็นฟอนต์ฟรีที่กูเกิลพัฒนาขึ้นเพื่อนำมาใช้ทดแทนฟ้อนต์ Tahoma, Angsana ที่แสนน่าเบื่อ แถมยังครอบคลุมกว่า 100 วิธีเขียน 800 ภาษา และ 100,000 ตัวอักษร จากทุกภาษาทั่วโลก โดยการทำงานร่วมกันระหว่าง Google และ Monotype ทำให้ฟอนต์ Noto เป็นเสมือนเครื่องมือสื่อสารบนสื่อออนไลน์ที่สามารถเข้าถึงผู้คนหลายพันล้านคนทั่วโลก

ฟ้อนต์ Noto ที่เราเห็นกันบ่อยๆ ในตอนแรกที่ Google ได้ทำการพัฒนาจะมีแค่ Noto Serif (ที่มีหัว) ซึ่งเมื่อเป็นตัวฟอนต์ภาษาไทยนั้น หน้าตาจะไม่ค่อยสวยสักเท่าไหร่นัก จึงได้พัฒนาฟ้อนต์ Noto Sans (ไม่มีหัว) ขึ้นมาใหม่ เพื่อเพิ่มความสวยงามให้กับฟ้อนต์ตระกูล Noto ให้ได้ใช้ฟรีและสวยงามน่าอ่านมากยิ่งขึ้นอีกด้วย

ฟ้อนต์ไทยในตระกูล Noto มีให้เลือก 2 แบบ คือ

  1. Noto Sans Thai (ไม่มีหัว)

สามารถดาวน์โหลดได้ที่นี่ https://www.google.com/get/noto/#sans-thai

2. Noto Serif Thai (มีหัว)

สามารถดาวน์โหลดได้ที่นี่ https://www.google.com/get/noto/#serif-thai

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

3. F0nt.com

https://www.f0nt.com/

เว็บไซต์นี้อยู่คู่กับการดาว์นโหลดฟ้อนต์ไทยมานานมากกกก….แล้ว มีฟ้อนท์ไทยสวยๆ ให่เราได้เลือกใช้ดาว์นโหลดมากมาย สามารถที่จะดาวน์โหลดได้ทั้งฟรี หรือมีบางฟ้อนต์อาจจะมีเงื่อนไขในการนำไปใช้ที่แตกต่างกันออกไปบ้าง แต่หากว่าถูกใจ หรืออยากจะสนับสนุนผู้สร้างสรรค์ ก็สามารถติดต่อไปได้โดยตรงเพื่อให้กำลังใจ ในการสร้างสรรค์ผลงานที่ดีออกมาให้เราได้นำไปใช้งานกันได้อีกนะคะ

ตัวอย่างฟ้อนต์ที่สามารถดาว์นโหลดได้จาก F0nt.com

สามารถนำไปใช้ได้ทั้งสื่อสิ่งพิมพ์, เว็บไซต์, ออนไลน์ หรืองานกราฟฟิก แต่เงื่อนไขขึ้นอยู่กับฟ้อนต์แต่ละตัว *ก่อนนำไปใช้อย่าลืมเข้าไป อ่าน: สัญญาอนุญาต ก่อนนะคะ

สรุป

ตัวอย่างเว็บไซต์ที่ให้ Download Fonts Tahi ทั้ง 3 เว็บไซต์นี้ หวังว่าผู้อ่านจะได้นำไปใช้และ ได้ประโยชน์ จากผู้เขียนบ้างไม่มากก็น้อยนะคะ

ขอบคุณค่ะ

Tencent (Thailand)

The Official Tencent (Thailand) Blog

PhatthanichaK

Written by

Tencent (Thailand)

The Official Tencent (Thailand) Blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade