การใช้ Google fonts กับ Construct 2

Google Fonts คือ บริการของ Google ที่มีฟอนต์หรือตัวอักษรรูปแบบต่างๆ ให้เราสามารถนำไปใช้ได้ฟรี  ทั้งแบบออนไลน์และดาวน์โหลดไปใช้แบบออฟไลน์ ซึ่งในระยะแรกๆ นั้น ยังไม่สนับสนุนภาษาไทยมากนัก แต่ในปัจจุบันเริ่มมีการพัฒนาฟอนต์ภาษาไทยเพิ่มมากขึ้น ในขณะที่เขียนบทความนี้มีฟอนต์ภาษาไทยให้เลือกถึง 26 รูปแบบ วิธีใช้ก็ง่ายเพียงนำลิงก์ CSS ไปแปะไว้ในส่วนหัว <head> … </head> ของเว็บเพจของท่าน แต่สำหรับการใช้ใน Construct 2 จะใช้ร่วมกับ web font ซึ่งก็ไม่ได้ยุ่งยากอะไรมากมายนัก มาลองดูขั้นตอนวิธีการนำไปใช้กันเลยครับ

1.  เข้าเว็บไซต์ https://fonts.google.com/

2. ทำการค้นหาเฉพาะฟอนต์ภาษาไทย โดยการคลิกเลือกภาษาที่ Language ที่แถบเครื่องมือด้านขวามือ

 

3. เลือกฟอนต์ และปรับแต่งรูปแบบตามต้องการ เช่น น้ำหนักหรือความหนาของฟอนต์ ในขณะปรับแต่งระบบจะแสดงตัวอย่างให้ดูเป็นระยะๆ จากนั้นคลิกเครื่องหมายบวก ( + ) เพื่อสร้างโค้ด

4. จะปรากฏแถบสีดำด้านล่าง ให้คลิกที่เครื่องลบ ( – ) หรือแถบสีดำ เพื่อเปิดหน้าจอรายละเอียดในการฝังฟอนต์ (Embed) ขึ้นมา

5. ทำการคัดลอกโค้ดชุดแรก ของแถบรูปแบบ STANDARD ดังนี้ “https://fonts.googleapis.com/css?family=ชนิดของฟอนต์”

6. เปิดโปรแกรม Construct 2 และเปิดหน้า Event Sheets ขึ้นมา เพิ่มแอคชั่น ของ Text ที่ต้องการตั้งรูปแบบฟอนต์เข้าไปใน Event On start of layout

  • Add Action > Text > Set web font

  • วาง URL ที่คัดลอกมาจากเว็บ Google fonts ในช่อง CSS URL > “https://fonts.googleapis.com/css?family=ชื่อรูปแบบฟอนต์”
  • ใส่ชนิดของฟอนต์ในช่อง Family name > “ชื่อรูปแบบฟอนต์”

8. Event Sheet เมื่อเพิ่มเว็บฟอนต์เสร็จเรียบร้อย

9. ตัวอย่างข้อความที่ใช้รูปแบบตัวอักษรของ  google fonts ใน Construct 2  ขณะทำการทดสอบโปรเจ็ค

ขอให้สนุกกับการทำงานนะครับ แล้วพบกันใหม่

สวัสดีครับ