สำหรับนักพัฒนาเว็บไซต์หรือคนทำเว็บไซต์ที่อยากจะได้ฟอนต์สวยๆ นำมาใช้ในเว็บไซต์ เราสามารถที่จะนำฟอนต์ที่ทาง Google ได้นำมาแจกให้ใช้งานฟรีๆ ได้ ชื่อว่า Google Fonts ครับ สำหรับบทความตอนนี้ เราจะมาดูกันว่าเจ้า Google Fonts นี้มีวิธีการเลือกใช้ฟอนต์อย่างไร และเราจะนำไปใช้งานได้อย่างไรครับ
รู้จัก Google Fonts
เริ่มต้นให้เราเข้าไปที่เว็บ fonts.google.com เราจะเห็นว่า Google Fonts นั้น ได้ทำการแบ่งในส่วนของหมวดหมู่ (Cataegories) ภาษา (Language) และคุณสมบัติฟอนต์ (Font Properties) เอาไว้อย่างชัดเจน
หมวดหมู่ (Categories) ของฟอนต์ ประกอบไปด้วย ฟอนต์มีเชิง (Serif), ฟอนต์ไม่มีเชิง (Sans Serif), ฟอนต์แบบประดิษฐ์ (Display), ฟอนต์แบบลายมือเขียน (Handwriting) และฟอนต์แบบกว้างขนาดเดียว (Monospace)
- ฟอนต์มีเชิง (Serif Fonts) เป็นฟอนต์ที่มีขีดตรงปลายตัวอักษร มักใช่ในสื่อสิ่งพิมพ์สมัยก่อน
- ฟอนต์ไม่มีเชิง (San Serif Fonts) เป็นฟอนต์สมัยใหม่ที่ไม่มีขีดตรงส่วนปลายของตัวอักษร เป็นฟอนต์แบบเรียบๆ
หมายเหตุ ถ้าเป็นฟอนต์ไทยก็จะเรียกว่าเป็นฟอนต์ที่มีหัวและไม่มีหัวครับ
- ฟอนต์แบบประดิษฐ์ (Display Fonts) เป็นฟอนต์ที่มีรูปแบบเฉพาะเพื่อไว้โชว์ในส่วนหัวของหน้า
- ฟอนต์แบบลายมือเขียน (Handwriting Fonts) เป็นฟอนต์ที่มีตัวอักษรเหมือนลายเส้นที่เขียนด้วยมือ
- ฟอนต์แบบกว้างขนาดเดียว (Monospace Fonts) เป็นฟอนต์มีพื้นที่แต่ละตัวอักษรขนาดเท่ากัน
ภาษา (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
วิธีการใช้งาน 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; }เพียงเท่านี้หน้าเว็บไซต์ของเราก็จะเปลี่ยนเป็นฟอนต์ที่สวยงามที่เราอยากได้แล้วครับ
เป็นอย่างไรกันบ้างครับสำหรับบทความนี้ คงจะพอเห็นภาพและวิธีการใช้งานนะครับ ว่าเราจะนำไปใช้งานได้อย่างไรบ้าง หากใครมีข้อสงสัยหรือต้องการให้ทางเราทำเว็บไซต์ให้ก็สามารถติดต่อสอบถามมาได้ ผ่านทางหน้าติดต่อเรานะครับ สวัสดี
Pingback: 4 สิ่งที่ต้องเตรียมก่อนทำเว็บไซต์ - WebDoDee