Google Fonts ฟอนต์ฟรี มีคุณภาพสำหรับทำเว็บไซต์

Google Fonts

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

รู้จัก Google Fonts

Google Fonts Web
Google Fonts Web

เริ่มต้นให้เราเข้าไปที่เว็บ fonts.google.com เราจะเห็นว่า Google Fonts นั้น ได้ทำการแบ่งในส่วนของหมวดหมู่ (Cataegories) ภาษา (Language) และคุณสมบัติฟอนต์ (Font Properties) เอาไว้อย่างชัดเจน

หมวดหมู่ (Categories) ของฟอนต์ ประกอบไปด้วย ฟอนต์มีเชิง (Serif), ฟอนต์ไม่มีเชิง (Sans Serif), ฟอนต์แบบประดิษฐ์ (Display), ฟอนต์แบบลายมือเขียน (Handwriting) และฟอนต์แบบกว้างขนาดเดียว (Monospace)

  • ฟอนต์มีเชิง (Serif Fonts)  เป็นฟอนต์ที่มีขีดตรงปลายตัวอักษร มักใช่ในสื่อสิ่งพิมพ์สมัยก่อน
Serif Font
Serif Font
  • ฟอนต์ไม่มีเชิง (San Serif Fonts) เป็นฟอนต์สมัยใหม่ที่ไม่มีขีดตรงส่วนปลายของตัวอักษร เป็นฟอนต์แบบเรียบๆ
San Serif Font
San Serif Font

หมายเหตุ ถ้าเป็นฟอนต์ไทยก็จะเรียกว่าเป็นฟอนต์ที่มีหัวและไม่มีหัวครับ

  • ฟอนต์แบบประดิษฐ์ (Display Fonts) เป็นฟอนต์ที่มีรูปแบบเฉพาะเพื่อไว้โชว์ในส่วนหัวของหน้า
Display Font
Display Font
  • ฟอนต์แบบลายมือเขียน (Handwriting Fonts) เป็นฟอนต์ที่มีตัวอักษรเหมือนลายเส้นที่เขียนด้วยมือ
Hand Writing Font
Handwriting Font
  • ฟอนต์แบบกว้างขนาดเดียว (Monospace Fonts) เป็นฟอนต์มีพื้นที่แต่ละตัวอักษรขนาดเท่ากัน
Monospace Font
Monospace Font

ภาษา (Language) จะมีทั้งภาษาไทย อังกฤษ และภาษาอื่นๆ ทั่วโลก

คุณสมบัติของฟอนต์ (Font Properties) ได้แก่ จำนวนของสไตล์ (Number of styles) ความหนา (Thickness) ความเอียง (Slant)  และความกว้าง (Width) ของฟอนต์

เราสามารถทำการทดสอบรูปแบบของฟอนต์ที่เราต้องการได้ด้วยการกำหนดให้แสดงผลเป็นประโยคสั้นๆ (Sentence) ประโยคยาวๆ แบบหนึ่งย่อหน้า (Paragraph) ตัวอักษร (Alphabet) ตัวเลข (Numerals) และประโยคที่เราต้องการโดยเฉพาะ (Custom) และยังสามารถทำการปรับขนาดความหนาของฟอนต์ (Font Weight) และขนาดของฟอนต์ (Font size) ได้อีกด้วย

ความหนาของฟอนต์ จะมีตั้งแต่ ขนาดบาง Thin 100-200 ไปจนถึงหนามากคือ Extra Bold 800 หรือ Black 900 ขนาดความหนาของฟอนต์ขึ้นกับฟอนต์ที่เราเลือกครับ บางฟอนต์อาจจะทำขนาดความหนาแบบไม่หนามาก เช่น สูงสุดที่ความหนา Regular 500

รับออกแบบเว็บไซต์
รับออกแบบเว็บไซต์

ฟอนต์ไทยใน Google Fonts

ปัจจุบันมีฟอนต์ไทยอยู่ใน Google fonts แล้วจำนวน 26 ฟอนต์ มีผู้พัฒนาฟอนต์เจ้าใหญ่ที่ชื่อ คัดสรร ดีมาก (Cadson Demak) เป็นผู้พัฒนาหลักมีถึงจำนวน 24 ฟอนต์ และ Suppakit Chalermlarp และ Multiple Designers อีกรายละหนึ่งฟอนต์ครับ

ฟอนต์ไทยที่อยู่ใน Google Fonts ได้แก่ Kanit, Prompt, Taviraj, Pridi, Sarabun, Mitr, Bai Jamjuree, Itim, Pattaya, Krub, Mali, Trirong, Sriracha, Chakra Petch, Maitree, Niramit, Chonburi, Athiti, Fahkwang, K2D, Charm, Thasadith, Srisakdi, Charmonman, Kodchasan และ KoHo

ฟอนต์ไทยที่นิยมใช้ในการทำเว็บไซต์ ฟอนต์ไม่มีหัว ได้แก่ Kanit และ Prompt ส่วนฟอนต์ไทยมีหัวก็จะเป็นฟอนต์ที่ชื่อ Sarabun

Kanit Font
Kanit Font
Prompt Font
Prompt Font
Sarabun Font
Sarabun Font

วิธีการใช้งาน Google Fonts

ให้เราทำการเลือกฟอนต์ที่เราต้องการใช้งาน โดยทำการกดปุ่ม + ที่อยู่เหนือฟอนต์ที่ต้องการ ระบบจะทำการบันทึกเข้าไปว่า ฟอนต์นี้ได้ถูกทำการเลือกแล้ว (Selected) และแสดงอยู่มุมขวาล่าง เมื่อเราทำการกดขยายแทบดังกล่าวจะพบวิธีการนำไปใช้งาน ทั้งนี้เรายังสามารถทำการเลือกได้อีกว่า ฟอนต์ที่เรากำลังจะใช้งานนั้นมีขนาดความหนาเท่าไร ได้ที่แท็บ Customize ครับ

อันดับแรก เราจะต้องทำการเรียก Google Fonts มาใช้งาน โดยมี 2 วิธีครับ

1. ใช้วิธีการใส่แท็ก <link> ลงไปในส่วนของ <head> ดังนี้

<link href="https://fonts.googleapis.com/css?family=Mitr&display=swap" rel="stylesheet">

คำว่า Mitr คือ ฟอนต์ที่เราต้องการใช้งานครับ

2. ใช้วิธีการนำเข้า Import โดยการใช้คำสั่ง import นั้นจะต้องนำไปใส่ในไฟล์ css หรือเขียนอยู่ภายในแท็ก style ดังนี้

<style>
 @import url('https://fonts.googleapis.com/css?family=Mitr&display=swap');
</style>

หลังจากที่เราเรียกใช้งานแล้ว ถึงตรงนี้เราสามารถทำการระบุให้คำหรือประโยคใดใช้ฟอนต์นี้ได้แล้วครับ เช่น ผมต้องการให้ทั้งหน้าเป็นฟอนต์ตัวนี้ก็เขียนระบุในไฟล์ css ตรงส่วน body ดังนี้

body { font-family: 'Mitr', sans-serif; }

เพียงเท่านี้หน้าเว็บไซต์ของเราก็จะเปลี่ยนเป็นฟอนต์ที่สวยงามที่เราอยากได้แล้วครับ

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

สอบถามเพิ่มเติม
สอบถามเพิ่มเติม

Leave a Comment

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *